CODEWITHSUNDEEP
cssunderlinetext-decorations
obs
obs

Reputation: 807

text-decoration: underline with transformed element inside

I have links which sometimes contain the character "•". With the webfont in use, the dot appears very small, so I apply transform: scale(1.25); This is only possible when wrapping the dot in a new box with display: inline-block;. But then, the underline below the dot is gone.

Here is the basic code

.dot{
  display: inline-block;
  transform: scale(1.25);
  margin: 0 0.25em;
}

a:link{
  text-decoration: underline;
}
<a href="#">
  Text 
  <span class="dot">•</span> 
  Text
</a>

I can't use a border, because links sometimes span over two lines.

Any ideas how this can be achieved?

Upvotes: 3

Views: 381

Answers (2)

Temani Afif
Temani Afif

Reputation: 272955

You can replace it with a gradient like below:

.dot{
  display: inline-block;
  transform:scale(1.25);
  margin: 0 0.25em;
}

a{
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom,
    transparent 0,transparent calc(1em - 1px),
    currentColor calc(1em - 1px),currentColor 1em) ;
  text-decoration:none;
}
<a href="#">
  Text 
  <span class="dot">•</span> 
  Text
</a>
<div style="width:50px">
<a href="#" >
  Text 
  <span class="dot">•</span> 
  Text
</a>
</div>

<div style="width:50px">
<a href="#" style="font-size:20px">
  Text 
  <span class="dot">•</span> 
  Text
</a>
</div>

Upvotes: 1

stalinrajindian
stalinrajindian

Reputation: 1431

Please try below css.

.dot{
  display: inline-block;
  font-size:44px;
  line-height:22px;
  vertical-align:middle;
}

Upvotes: 0

Related Questions