CSS : set the CSS line

Question

.banner-bottom h2 {
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;
}

.banner-bottom h2:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background: #372568;
  height: 2px;
  width: 8%;
}

.banner-bottom h2:after {
  content: '';
  position: absolute;
  top: 25%;
  right: 25%;
  background: #372568;
  height: 2px;
  width: 8%;
}

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
    <div>
      <div>

Result :

How to css its line according to the length of writing example as below:

I'm not seeing the same result as your screenshot. I get https://i.stack.imgur.com/2IcrP.png. — TRiG, Dec 21 '17 at 12:42

score 8 · Answer 1 · answered Dec 21 '17 at 06:49

8

Try this:

.banner-bottom h2 {
  font-size: 2em;
    color: #372568;
    padding-bottom: 1em;
    text-align: center;
}

.line:before {
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;
}

.line:after {
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;
}
.promo {
  display: inline-block;
}

<div class="banner-bottom">
  <div class="container">
    <h2><span class="line"><span class="promo">Special Promo</span></span></h2>

    <h2><span class="line"><span class="promo">Promo</span></span></h2>
  <div>
<div>

answered Dec 21 '17 at 06:49

VinoCoder

1,133
5
22
45

Would `
` be more appropriate than a `` here? – Bergi Dec 21 '17 at 10:11
@Bergi: No, because [a heading cannot contain an hr](https://checker.html5.org/?showsource=yes&doc=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%3C%21DOCTYPE+html%3E%3Ctitle%3E%26lt%3Bhr%3E+in+heading%3C%2Ftitle%3E%250A%3Ch2%3E%3Chr%3E%3C%2Fh2%3E). hr is only meant to be used as a sectioning separator for when sectioning elements and headings cannot be used. Its use as a literal "horizontal rule" has been deprecated, for obvious reasons. – BoltClock Dec 21 '17 at 11:58
@BoltClock Oops, how could I miss that it was placed *inside* the heading. Thanks! – Bergi Dec 21 '17 at 12:23

score 5 · Accepted Answer · edited Dec 21 '17 at 10:13

Setting display property value to inline-block is the good to go with as @Vinothin has answered for you. Here's another trick that you can use.

Using transform property will help you while using absolute position.

.banner-bottom h2 {
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;
}

.banner-bottom h2:before {
  content: '';
  position: absolute;
  top: 25%;
  transform: translateX(-100%);
  /* no left value is required */
  background: #372568;
  height: 2px;
  width: 8%;
}

.banner-bottom h2:after {
  content: '';
  position: absolute;
  top: 25%;
  /* no right value is required */
  background: #372568;
  height: 2px;
  width: 8%;
}

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
  </div>
</div>

If you need spacing before and after the word then play with the translate value by increasing or decreasing it.

Using transform property will help you a lot as well in future. Suppose you have a centered list and you need to position the icon left center to the list, then transform trick only the way to go with. I have informed this trick as I have also faced similar problem before.

Hope this helps!

thank you for helping me a lot :)) – illogic Dec 21 '17 at 07:35 — illogic, Dec 21 '17 at 07:35
It's my pleasure. – Bhojendra Rauniyar Dec 21 '17 at 07:55 — Bhojendra Rauniyar, Dec 21 '17 at 07:55

CSS : set the CSS line

2 Answers2