0

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.

1 Answer 1

2

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;
}
5
  • you are a genius, thanks a lot, if possible can you edit the solution with .span class too.... Commented Apr 6, 2015 at 7:58
  • 1
    @BabyinMagento2 thanks and look at my edited answer.
    – dh47
    Commented Apr 6, 2015 at 8:02
  • is this right? = <div class="horizontal_line"> <h2><span>Test</span></h2> </div> Commented Apr 6, 2015 at 12:21
  • how i have to replace this line : <h2><span>Test</span></h2> by one code? Commented Apr 6, 2015 at 12:45
  • 1
    @BabyinMagento2 check my edited answer
    – dh47
    Commented Apr 6, 2015 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.