Set the absolute width of the positioned element in your content (this is just text)

Question

I'm 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 the code

The problem is that the span width is set to 100%, and its width does not match its contents. this is what i get from firebug

As you can see, the text spans a DIV that contains a string.

I tried setting display:inline-block for span but nothing changed. How can I make the absolute set width of the range to fit the content?

Answer 1

Why not do it purely in CSS with one 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> 

Answer 2

I suggest making a few changes to your code.

• You can remove the div element and use pseudo-element later with CSS instead

   <div class="al-head-container"> <span>Center Websites</span> </div> 

• Then, with CSS, make the pseudo-element absolute to place it beyond 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 out this Demo on Jsfiddle

---

_{Please note that you can replace the frame on the violin with a background image}

Answer 3

Try the following:

 .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 work fiddle

Answer 4

try to add margin automatically in the absolute range

 .al-head-container > span{ font: 2.1em titr; color: #ae7f00; background-color: #FFFFFF; position: absolute; right: 0; left:0; margin : auto; }