0

I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.

This is what I want,

enter image description here

This is what I've got so far.

a {
  background: none;
}

a::after {
  content: "";
  border: 3px solid #000;
  display: block;
  position: relative;
  top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>

And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/

Why is the position relative with negative top margin not working?

epascarello
  • 204,599
  • 20
  • 195
  • 236
Vinith Almeida
  • 1,421
  • 3
  • 13
  • 32
  • 1
    Note about possible indicated duplicate: The question here asks for a link where the whole line/element acts as a link/is clickable. This is not covered by the previously indicated duplicate. – Johannes Jun 24 '21 at 12:56
  • @Johannes this one for the duplicate cover it: https://stackoverflow.com/a/57891231/8620333 (you make the h2 a link and it's done) – Temani Afif Jun 24 '21 at 13:14

3 Answers3

1

This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:

html,
body {
  margin: 0;
}

a.link1:link,
a.link1:visited {
  text-decoration: none;
  font-size: 24px;
  color: green;
}

.link1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: #dfd;
  padding: 6px 10px;
}

.text1 {
  flex-grow: 0;
  display: inline-block;
}

.line {
  height: 2px;
  background: #fa0;
  flex-grow: 1;
  margin: 0 20px 0;
}
<a class="link1" href="#">
  <div class="text1">Explore all Services</div>
  <div class="line"></div>
</a>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline

You can adjust the thickness of the line and the color of the font.

 .my_underline {
    overflow: hidden;
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    color:aqua;
}

 .my_underline:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
thelovekesh
  • 1,364
  • 1
  • 8
  • 22
0

Use theses styles , 

a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}

a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
marko-36
  • 1,309
  • 3
  • 23
  • 38
ShivaKrishna
  • 1
  • 2
  • Hello @ShivaKrishna, I have created a snippet from your code and ran it. The result does not match the desired output. Maybe I have missed something? Anyway, you might want to re-check the CSS. – marko-36 Jun 25 '21 at 09:58