Search code examples
csssasspseudo-element

Styling Pseudo element ::after shows no line-wrap

I wanted to create an underline effect for the Headings for my blog using css. For that, I used the Pseudo element ::after for styling and was able to achieve the following results

enter image description here

The problem arises when the length of the Headings exceed the single line length, it doesn't follow the wrap-around effect like the one shown below.

enter image description here

The css style I used to generate this effect is

// styles.sass
h1::after, 
h2::after
  position: absolute
  margin-top: -0.45em
  margin-left: -10px
  display: block
  width: 107%
  height: 0.5em
  background: #EFF239  
  content: ''
  z-index: -1
  border-bottom: 2px solid #ddd

h2::after
  background: #a5f1b1

Could someone guide me, how I could also style the ::after element such that the underline follows the Heading text ?

Solution

  • Don't use pseudo element, rely on box-shadow:

    span {
  font-size: 30px;
  padding: 0 10px;
  box-shadow: 0 -.4em 0 #EFF239 inset;
  -webkit-box-decoration-break: clone;
}
    <span>Some text here <br> and here</span>