CSS How do you make this kind an underline?

HTML & CSS
1

Here is the Screenshot:
image

Link to codepen:

I know how to make complete underline but how do you achieve an underline effect like the one above?

2

Hi there akhillav,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container {
    text-align:center;
 }

h1 {
    display:inline-block
 }

h1::after{
    display: block;
    width: 50%;
    padding: 0.3em 0;
    margin: auto;
    border-bottom: 1px solid #000;
    content: '';
 }
</style>

</head>
<body> 

<div id="container">

 <h1>Page Description</h1>

</div>

</body>
</html>

coothead

3 Likes
3

Thanks! It worked perfectly!

4

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.