Menu
To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line.
The correct way to add a line after a heading IS to use CSS not a <hr/> element. note that H elements are block level elements (unless you are styling them to be inline or are using display: flex on the parent container, so the border-bottom will extend the full width of thecontainer.
Look at this http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , here is your answer.
Here is your original code modified
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>Note: the article is not online anymore, here is the last good archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition
needed this a few days ago, but the accepted answer isn't working in IE.
this is what I came up with: works in every major browser (> ie8)
jsfiddle: http://jsfiddle.net/gKve7/
/* headlines with lines */
.decorated{
overflow: hidden;
text-align: center;
}
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 2px solid;
width: 100vw;
margin: 0 20px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}<h2 class="decorated"><span>My Title</span></h2>This might work:
.floatClear {
clear: both;
}
#wrapper {
text-align: center;
position: relative;
}
#wrapper .line {
border-bottom: 2px solid red;
position: absolute;
width: 100%;
top: 15px;
}
#wrapper .textbox {
position: absolute;
width: 100%;
}
#wrapper .textbox .text {
background-color: white;
margin: 0px auto;
padding: 0px 10px;
text-align: center;
display: inline;
font-size: 24px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="line"></div>
<div class="textbox">
<div class="text">This is my Title</div>
</div>
</div>
</body>
</html>What happens here is you set the text over the line the background and with the background-color plus the side padding so it will hide the line behind the text block.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With