- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Okay, the topic title is a bit ambiguous, but essentially this is what I want to do ([see example](http://imgur.com/vEY8lWy “see example”)). I have several categories of services in _h1_ tags and I want this diagonal graphic element to sit adjacent to each title. Since the graphic is too wide, I want it to be clipped on the right side and the left side intact.
http://codepen.io/copaesthetic/pen/kfqdJ _img_ method
http://codepen.io/copaesthetic/pen/cGdph _background img_ method
Extra question: Why is it that _h1_ tags take the full width of the container instead of the inherit width of the text its wrapped around?
http://codepen.io/wolfcry911/pen/EDcsL
h1 elements are block level by default and take up all available width
Fork of @wolfcry911 Codepen without set width.
http://codepen.io/anon/pen/wgbsc
**May cause scrolling issues on mobile**
Thank you, nice use of the pseudo-element to create a block.
I’ve never seen percentages used with absolute positioning, can you explain how the _left: 100%_ moves the background exactly right of h1? For instance, if the block comes immediately after h1, why doesn’t _left: 0px_ work if it even needs to be defined at all?
A **pseudo element** isn’t actually after the the h1 element…it’s after the **content** of the h1.
It’s kind of like this
[h1]
[h1:before]
Text In Here
[h1:after]
[/h1]
If that make any sense.
Gotcha, thanks.