How to place a border around the text (CSS before after pesudo class and padding related)

Question

I am trying to replicate the effect where a text is surrounded by the centered border with padding around it. Example. Despite trying to use the same method as above site, the border covers the text; I must be doing something wrong which I cannot spot.

I will appreciate your help.

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  width:75%;
  position: relative;
  text-transform: uppercase;
  text-align:center;
}

 .header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
}

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative;
}

<div class="header">
   <p><span>Work</span></p>
</div>

This is the result I want to get.

score 1 · Answer 1 · answered Feb 22 '19 at 05:29

added

.header p {
      position: relative;
      text-transform: uppercase;
      text-align: center;
      display: inline-block;
      padding: 40px;
      border: 3px solid black;
      margin-left: 50%;
      transform: translatex(-50%);
    }

removed :before css, removed width used display: inline-block and used padding to give space between the text and the border. and used margin and transform property to bring it in the center

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  position: relative;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  padding: 40px;
  border: 3px solid black;
  margin-left: 50%;
  transform: translatex(-50%);
}

 /*.header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
}*/

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative;
}

<div class="header">
  <p><span>Work</span></p>
 </div>

Sorry maybe I did not clearly stated what I wanted as English is my second language. Could you check the updated post? — Jun Jung, Feb 22 '19 at 05:34

Piyush Verma · Accepted Answer · 2019-02-22T05:43:32.250

1

you just need background color on span

.header {
  color:black;
  font-size:3rem;
  line-height:1.5;
}

 .header p {
  width:75%;
  position: relative;
  text-transform: uppercase;
  text-align:center;
}
.header p::before {
  display:block;
  content:'';
  width:100%;
  position: absolute;
  background:#000;
  height:3px;
  top:50%;
z-index:0;
}

 .header p > span{
  padding:0 1rem; 
  display:inline-block;
  max-width:75%;
  position: relative; 
  background-color:#fff;
z-index:1;
}

<div class="header">
  <p><span>Work</span></p>
 </div>

edited Feb 22 '19 at 05:43

answered Feb 22 '19 at 05:36

Piyush Verma

285
1
8

Thank you but this is not exactly what I was looking for T.T I attached a photo of what I want. – Jun Jung Feb 22 '19 at 05:37
1

@yong please check the updated code now line is behind your text now – Piyush Verma Feb 22 '19 at 05:39
Hahaha....I want to punching the desk right T.T Thank you! This is why coding is so fun isn't it. – Jun Jung Feb 22 '19 at 05:41
1

yeah it is :) just one more thing add z-index on span as well as maybe on some browser line will appear above your text – Piyush Verma Feb 22 '19 at 05:43

How to place a border around the text (CSS before after pesudo class and padding related)

2 Answers2