Magento – How to Display Text Between Horizontal Line

csshtml

I want to display "text between horizontal line", so

i am following this link :

https://stackoverflow.com/questions/16009654/horizontal-line-in-the-middle-of-text

but in our theme.css file, we already using ".span" & ".h2" classes.

if i use code in above link, it will apply for all the html codes which using these css classes : "span", "h2".

but i don't want that to be happen.

i am sure, this is magento topic as we are using lot of "h2" and "span" in magento, please close this question as "off topic"

give me some guidance.

Best Answer

You can always use unique classes above particular <h2> tags say for example 

<div class="horizontal_line">
   <h2>Text</h2>
</div>

then CSS class will be 

.horizontal_line h2{
    font-size: 100px;
    border-top: solid 1px black;
    width: 100%;
    height: 50px;
    margin-top: 25px;
    top: 50%;
    z-index: 1;    
}

the same way for <span>

 <div class="horizontal_line">
       <span>Content</span>
    </div> 



.horizontal_line span{
     background: #fff;
     padding: 0 20px;
     margin-top:-25px;
     display: inline-block;
     z-index: 5;

to get output according to you add this code

HTML

<h2><span>Test</span></h2>

CSS

span{
    margin:0;padding:0 10px;
    background:#fff;
    display:inline-block;
}
h2{

    text-align:center;
    position:relative;
    z-index:2;

}
h2:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 1px red;
    z-index:-1;
}
Related Topic