0

There is property 'text-decoration: underline' in CSS. I came across an implementation where I have to just put a line half the width of the text and underline needs to be centered, as the attached image

It would be great if somebody tells me how I can specify the width of underline in CSS or how can I implement that style.

required style

Abdul Azeem
  • 337
  • 4
  • 12

1 Answers1

1

You can use :before to do this, and it also allows you to adjust the width of the underline and style it accordingly.

p {
font-size: 30px;
display: inline-block;
padding-bottom: 10px;
position: relative;
}

p:before {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid #333;
}
<p>HEADLINE</p>
Sam Johnson
  • 742
  • 1
  • 8
  • 24
  • I'm using Navlink from react-router-dom, these styles are not picked by navlink . LESSON PLANNER – Abdul Azeem Jan 31 '19 at 14:04
  • I'm not very familiar with React. Can you not apply CSS to `navlink`? – Sam Johnson Jan 31 '19 at 14:06
  • yeah, I can apply those styles to NavLink and :before syntax also worked. But the thing I have to deal related to ReactJS is the active style prop, so that only active link gets underlined styles. Thank you for your answer – Abdul Azeem Jan 31 '19 at 14:20