CODEWITHSUNDEEP
htmlcssunderline
Burgo
Burgo

Reputation: 41

Line under a text in HTML/CSS

I'm a beginner/learner with HTML & CSS.

How can i put a line under some text?

I don't want to underline the text but I want to make something along the lines of this

enter image description here

How can i implement this?

Upvotes: 1

Views: 22431

Answers (5)

Kornilov Ruslan
Kornilov Ruslan

Reputation: 143

That's a valid question, I know what you mean

span{
  border-bottom:1px solid #000;
}

Upvotes: 1

develop1
develop1

Reputation: 767

If you are trying to control the size of the line, you can use CSS.

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

Another thing you can do is boarder-bottom

<!DOCTYPE html>
<html>
<head>
<style>
p  {
    border-style: solid;
    border-bottom: thick line #ff0000;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 250px;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>

Upvotes: 2

Travis
Travis

Reputation: 687

Just use an <hr></hr> tag

Example code:

    <body>
      <h1> Header</h1>
      <hr>
      <p> text under header </p>
    </body>

Upvotes: 1

Johannes
Johannes

Reputation: 67798

You can use the hr tag and style it via CSS:

.x {
  width: 40%;
  float: left;
}
<h1>Test</h1>
<hr class="x">

Upvotes: 1

user8313246
user8313246

Reputation:

You can use a <hr> tag.

Here is a nice page with some example styling: https://css-tricks.com/examples/hrs/

If you wanted to make it only 80% of the containers width you could add some CSS as follows

hr {
  width: 80%;
}
<hr>

Upvotes: 4

Related Questions