I have a p tag. I want a border line next to it.
<p style="margin-left: -30px;font-size: 12px;margin-bottom: 2px;"><strong> Categories</strong></p>
I want to add a line next to p tag as the following image.
How can i implement it?
Please help,
Thanks
There are many other ways to achieve this, one of them would be applying a border-bottom to a pseudo-element (which establishes a new block formatting context in order to prevent overlapping) and floating the <strong> element to the left:
p.hasBorder {
overflow: hidden; /* Establish a new block formatting context */
}
p.hasBorder > strong {
float: left;
}
p.hasBorder:after {
content: "";
display: block;
border-bottom: 3px solid silver;
overflow: hidden; /* Establish a new block formatting context */
height: 1em; /* Up to you */
}
<p class="hasBorder">
<strong>Categories</strong>
</p>
Use a pseudo element
Jsfiddle Demo
CSS
p {
font-size: 12px;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
p:after {
content:"";
position: absolute;
border-bottom:1px solid grey; /* border-size & color are now controllable */
width:100%;
height:1em;
display: inline;
margin-left: 1em;
}
p {
margin-left: 0px;
font-size: 12px;
margin-bottom: 2px;
position: absolute;
margin-top: -7px;
background-color: #fff;
color: #333;
padding-right: 5px;
}
.line-back {
border-bottom: 1px solid #ccc;
margin: 25px;
}
<div class="line-back">
<p>
<strong> Categories</strong>
</p>
</div
p{
}
P:after{
content:'________';
}
DEMO
JS Fiddle
p {
font-size: 12px;
margin-bottom: 2px;
position:relative
}
p::after {
content:"";
border-bottom:1px solid grey;
width:100px;
position:absolute;
bottom:2px;
}
Related
Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
I use the :after method to create lines
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/
As you can see the line get too wide, and make the website too wide.
You could achieve this with an extra <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
Another solution without the extra <span> but requires an overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
External examples: First, Second
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}
<h2>Heading</h2>
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content: "";
flex: 1 1 auto;
border-top: 1px solid #000;
}
<h2>Title <span></span></h2>
Here is another, in my opinion even simpler solution using a flex wrapper:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
External link
I notice that there are some flexbox implementations but they don't explain why and how to use it.
First, we just need one element, for this example h2.
We will change the element's display behavior to display: flex
Then, we center vertically its child elements using align-items: center.
h2 {
...
display: flex;
align-items: center;
}
Then, let's draw the line using the pseudo-element after.
We add '' to the content property to draw the element (we must).
Now lets make it flexible using flex: auto. This means that our element is sized according to its width and height properties. It grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
Then we add an small gap between the text and the line using margin-left: 1rem.
Finally, we draw a black line using border-top: 1px solid #000.
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
Here is functional snippet.
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}
<br>
<hr>
<h2>ABOUT US</h2>
Here is how I do this:
http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen.
So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
I am going to build this
This is my HTML code
<div class="al-head-container">
<div></div>
<span>Center Websites</span>
</div>
This is css :
.al-head-container{
margin: auto;
width: 100%;
padding:0 4%;
position: relative;
box-sizing: border-box;
}
.al-head-container > span{
font: 2.1em titr;
color: #ae7f00;
background-color: #FFFFFF;
position: absolute;
right: 0;
left:0;
}
.al-head-container > div{
width: 100%;
height: 20px;
background-image: url("../image/head-line.jpg");
position: relative;
top: 25px;
}
But this is the result of code
The problem is the span width is set to 100% and its width doesn't fit to its content. it is what I get from the firebug
As you see the text covers the DIV that contains the line.
I tried to set the display:inline-block for span but nothing changed. How do I can make the absolute positioned span width to fit the content?
Why not accomplish this purely in CSS with a single element:
div {
border-top:1px solid lightgrey;
border-bottom:3px solid lightgrey;
height:2px;
position:relative;
margin-top:15px;
}
div:after {
content:attr(data-label);
position:absolute;
top:-10px;
left:50%;
padding:0 20px;
display:inline-block;
background:#fff;
transform: translateX(-50%);
text-align:center;
color:#A37716;
font-size:24px;
}
<div data-label="Center Websites"></div>
I will suggest make a few changes on your code.
You can remove the div element and instead use a pseudo-element later with CSS
<div class="al-head-container">
<span>Center Websites</span>
</div>
Then with CSS make the pseudo-element be the absolute one to place it behind the span:
.al-head-container{
position:relative;
}
.al-head-container > span{
font: 2.1em titr;
position:relative;
z-index:10;
display:inline-block;
padding:0 20px;
height:2.1em;
line-height:2.1em;
color: #ae7f00;
background-color: #FFFFFF;
}
.al-head-container:after{
content:"";
width: 100%;
top:50%;
transform:translateY(-50%);
border-top:dotted 3px red;
position: absolute;
left:0;
}
Check this Demo on Jsfiddle
Note that you can replace the border on the fiddle with your background image
Try this:
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 3px solid gray;
border-top: 1px solid gray;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 30px;
}
.fancy span:after {
left: 100%;
margin-left: 30px;
}
<div class="subtitle fancy">
<span>Center Websites</span>
</div>
Also here you have a working fiddle
try to add margin auto on absolute span
.al-head-container > span{
font: 2.1em titr;
color: #ae7f00;
background-color: #FFFFFF;
position: absolute;
right: 0;
left:0;
margin : auto;
}
Here is my fiddle:
http://jsfiddle.net/schmudde/VeA6B/
I cannot remove the top and bottom padding on either side of a font awesome icon:
span {
border: 1px solid red;
line-height: 40%;
}
i {
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.
Use span { line-height: 100%; } so it would fill the block.
The line-height on the span won't help you much as the icon is added to the pseudo class :before on the <i /> tag. This pseudo class will create a somewhat hidden element, if you can call it that.
So if you want to override the css:
.icon-check:before { font-size: 2rem; }
Removing the padding of the icon can be tricky. Maybe if you set the span to display: inline-block you can use height, width in combination with overflow: hidden.
span {
border: 1px solid #FF0000;
display: inline-block;
height: 38px;
overflow: hidden;
position: relative;
width: 45px;
}
i.icon-check:before {
left: 0;
position: absolute;
top: -4px;
}
DEMO
You set borders in span, and line inheriting line-heights in i, that's the problem.
just add borders to i :
span {
line-height: 40%;
}
i {
border: 1px solid red;
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
Fiddle
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I would like to have a divider on my page that looks like this:
What is the best way to do that?
html
<h3><span>My latest work</span></h3>
css
h3 {
position:relative;
text-align:center;}
h3 span {
display:inline-block;
padding:0 10px;
background:#fff;
}
h3:before {
content:"";
display:block;
position:absolute;
z-index:-1;
left:0;
right:0;
top:50%;
height:1px;
background:#ccc;
}
We can do this without images or masking lines like so:
HTML
<div class="rule">
<div class="line"><div></div></div>
<div class="words">words are cool</div>
<div class="line"><div></div></div>
</div>
CSS
.rule {
display: table;
}
.rule>div {
display: table-cell;
white-space:nowrap;
}
.line>div {
border-bottom: 1px solid silver;
height: 1px;
}
.words {
padding: 0 5px;
}
.line {
width: 50%;
vertical-align: middle;
}
Demo: http://jsfiddle.net/5tqE5/1/
This uses attr() which is not supported in older browsers. It could be replaced with an extra element.
<div class="lines" data-text="Some Text Goes Here"></div>
.lines {
position: relative;
font-size: 20px;
font-family: sans-serif;
margin: 0 auto;
border-top: 1px solid silver;
margin-top: 20px;
}
.lines:before{
content: attr(data-text);
background-color: #fff;
position: absolute;
text-align: center;
left: 50%;
width: 220px;
margin-left: -110px;
padding: 10px;
top: -20px;
}
Dunno about the 'best' - you've given no terms by which to assess that. Smallest, fastest, most compatible, etc, etc.
Anyhoo, I just took a 1-pixel wide slice of your image and saved it. I then use it as the background-image of the div.
CSS:
#myDiv
{
background: url(horizline1x41px.png) repeat;
text-align: center;
line-height: 41px;
}
#myDiv span
{
padding-left: 16px;
padding-right: 16px;
background: white;
font-weight: bold;
font-size: 1.5em;
}
HTML:
<div id='myDiv'><span>OUR LATEST WORK</span></div>
Demo: http://jsfiddle.net/8zve4/
I don't like the extra markup, but this should work.
CSS:
.hline {
border: 1px solid #EEE;
color: #666;
font-family: helvetica;
font-weight: bold;
font-variant: small-caps;
letter-spacing: .1em;
line-height: 0px;
text-align: center;
text-transform: uppercase;
}
.hline > span {
background-color: #FFF;
padding: 0px 1em;
}
HTML:
<div class="hline"><span>Our latest work</span></div>
I have a (CSS) stacking question.
The tab-boxes on my development site below have z-index set as -1 so that their border appears behind the tabs above them, so that the active tab's white bottom border covers it. But on all browsers but Opera this makes descendants of the tab-boxes (links, forms, etc.) unclickable. You can see this at:
http://od.philosofiles.com/
Can anyone help? Here's the bare bones of the HTML and CSS, though examining the link above with Firebug would probably be more illuminating:
<ul class="odtabs">
<li id="tab-Authors1" class="first active">Tab</li>
</ul>
<div id="tab_content-Authors1" class="odtab-content">
<p>Tab Box</p>
</div>
<style type="text/css">
<!--
.odtabs li {
float: left;
background-color: #ddd;
width: 80px;
height: 19px;
list-style-type: none;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtab-content {
border: 1px solid #babcbd;
margin-top: -1px;
clear: both;
position: relative;
top: -1px;
z-index: -1;
}
-->
</style>
Set z-index to -100.
.odtab-content {
border:1px solid #BABCBD;
clear:both;
font-size:0.9166em;
margin-top:-1px;
padding:0 1em;
position:relative;
top:-1px;
z-index:-100;
}
I finally fixed this myself, after a lot of experimentation with line-by-line reconstruction. I believe the problem was due to the z-index being negative; however, the only way to make it work with a positive z-index and a higher positive z-index was to set position: relative on the tabs, which required quite a different approach. (Apparently z-index only works on absolute, relative or fixed positioned elements.) Here, for those interested/with similar problems, is the full CSS I used:
ul.odtabs {
display: inline;
margin: 0;
padding: 0;
}
.odtabs li {
float: left;
background-color: #ddd;
border: 1px solid #babcbd;
width: 80px;
height: 19px;
margin-right: 2px;
text-align: center;
list-style-type: none;
position: relative;
z-index: 2;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtabs a {
color: #78797c;
font-size: 0.75em; /* 9px = 12*0.75 */
font-weight: bold;
margin-top: 0px;
padding-top: 0px;
}
.odtabs .last {
margin-right: 0px;
}
.odtab-content {
font-size: 0.9166em;
border: 1px solid #babcbd;
padding: 0px 1em; /* ie. 12px */
clear: both;
position: relative;
top: -1px;
z-index: 1;
}