Css issue position

Question

This is the html part :

<div class="sama_productblocks_grid">
    <div class="title-bar">
        <h3>Nieuwste producten</h3>
    </div>
.....
</div>

This is the css

 .sama_productblocks_grid .title-bar h3 {
     margin: 0;
     position: relative;z-index: 3;
     font-size:18px;
     display: inline-block;
     color: #6D6C6C;
     font-weight: 400;
     text-transform: uppercase;
     font-family: "Open Sans",sans-serif !important;
     padding: 0px 65px;
}
/*newest product*/
.title-bar{
    position: absolute;
    overflow: hidden;
    margin-bottom: 10px;
    text-align: center;
    border-bottom:3px solid black;
    z-index: 3;
    width:100%;
    margin-bottom: 10px;
}
.sama_productblocks_descrition {margin-top:40px;}

What i want to achieve is to put a line before and after the text: Nieuwste producten. So I want to look like this: ----------- Nieuwste producten ------------

Try `.title-bar h3:before,.title-bar h3:after{ content:"----------------------"; }` — Rohan Kumar, Aug 10 '15 at 09:36

score 0 · Answer 1 · answered Aug 10 '15 at 09:36

0

Do you mean something like this:

h3:before {
    content: "---------------- "
}
h3:after {
    content: " ----------------"
}

answered Aug 10 '15 at 09:36

ArBro

731
5
18

score 0 · Accepted Answer · answered Aug 10 '15 at 09:40

Is this what you are looking for?

body {
    margin-top: 50px;
}

.hr-div {
    height: 1px; 
    background-color: #e6e6e7; 
    text-align: center;  
    margin: 10px 0 10px -10px;
}
.hr-span {
    background-color: white; 
    position: relative; 
    top: -10px; 
    padding:0 10px; 
}

<div class="hr-div">
    <span class="hr-span">Your Title Here</span>
</div>

Css issue position

2 Answers2