Setting bottom border distance (or shadow) for multi line text

Question

I want to set a bottom border for some text but so that it has much lower distance than default, so it looks something like this:

However as I understand, this cannot be done using border property. So I'm trying to use :after property. Following code does what i need but only if the text is on one line.

a:after{
    margin-top: -40px;
    display: block;
    content: ' ';
    height: 30px;
    background: green;
}

It will make the multi line text like this:

Is there anyway to add bottom border/shadow like this for multiple lines text using CSS only?

JSFiddle Link: http://jsfiddle.net/ty2ork8b/

One solution is to wrap the text in another element and apply the design to that element. — imvain2, Dec 04 '20 at 20:10

score 1 · Accepted Answer · answered Dec 04 '20 at 20:49

You can get good control of the green line by giving the a element a linear gradient background-image, adjust the percentage values to be exactly what you want depending possibly on the characteristics of the typeface you want to use.

    a  {
      font-size: 40px;  
      background-image: linear-gradient(to top, transparent 0%, transparent 10%, green 10%, green 40%, transparent 40%);
      text-decoration: none;
    }

<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing ejlit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit</a>

Setting bottom border distance (or shadow) for multi line text

1 Answers1