css - Positioning content in :after pseudo-element absolutely relative to an inline elements top edge -
i'm looking css-only way position content in :after
pseudo element absolutely relative - possibly multiline - element's top edge. result should resemble this:
usually there's no rocket science involved archieve this, i'd find solution meets next criteria:
do not utilize
:before
pseudoelement (this needed accomplish other independent thing), do not utilize
display: block/inline-block;
on inline element (because creates ugly holes in text flow), allow define width of elements percentage of containing element (at to the lowest degree after applying rule of three), do not hardcode top position/margin/padding of
:after
-pseudo-element in way makes dependent of parent element's position within grandparent element, parent element's height or actual element's height (or create short: don't create dependent of content), do not insert additional html elements, and do not add together js.
i created codepen makes easier grasp i'm going here.
i know possible result violating 1 of restrictions listed above (as demonstrated in codepen), i'm looking elegant solution problem not needed.
after playing around quite while i'd not possible, great if convince me of contrary - or @ to the lowest degree formally proves impossible. lot help in advance.
well, possible solution wanted method this. - first mention, work you'd need define ::after
content
straight in css, not through data-
attribute. (i don't know why, seems parsing problem.) - set position:relative
.wrapper
. you're going move ::after
left-right
based on parent (not direct one). - set width: 100%
::after
(100% of parent) - set white-space: pre
::after
- this important - write content
straight using \a
(escape character) break word in particular places. - set top: 0
, give negative right
position (how far want)
note: might need set word-wrap: break-word
on elemenets if additional text overflowing out of wrapper.
basically, addition/modification css:
.wrapper { position: relative; } .accent::before{ position: absolute; width: 100%; content: "unfortunately \a aligned \a lastly line of said span."; white-space: pre; right: -70%; } .content p { word-wrap: break-word; /* in illustration <p> problematic */ }
note: don't know how method responsive designs, never tried way.
tested on ff , chrome. live example
edit: hm, yeah, started ::after
accident switched ::before
=)
alright, minor modifications css:
- instead of width: 100%
set width: auto
- instead of top: 0
need manually (sorry) cut down margin-top: -(number)px
- don't use top
it's gonna set top position based on wrapper itself. - switch right: -(number)%
right: -(number)px
css modification:
.accent::after{ width: auto; right: -50px; margin-top: -40px; /* , remove "top" property */ }
live example
another edit cleaner working solution can utilize content: attr(data-meta)
(removed white-space: pre
, set width
wanted percentage size:
.accent::after{ position: absolute; width: 30%; content: attr(data-meta); right: -50px; margin-top: -40px; }
live example
css css3 layout css-position pseudo-element