0

I want to add a decent line around my title

for example

------ Title ------

but I want the line be continued and decent

is there any library or CSS I can use for this requirement?

Allyssa
  • 53
  • 1
  • 9

1 Answers1

1

You before in css like this:

.wrapper{
 width: 25%;
}
span {
    display: block;
    margin-bottom: 15px;
    position: relative;
    text-align:center;
   
}
span:before {
    content: "";
    top: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #d6dde4;
    display: inline-block;
    position: absolute;
}
span b {
    background-color: #fff;
    padding: 0 10px;
    font-size: 14px;
    color: #39335b;
    position: relative;
    display: inline-block;
}
<div class="wrapper">
<span>
<b> title</b>
</span>
</div>
danhuong
  • 202
  • 1
  • 8
  • thanks, may i ask you how do I let it only effect specific span b but not all the and – Allyssa Feb 04 '21 at 18:18
  • @Allyssa you need set a specific class name for and to avoid apply for all tag – danhuong Feb 04 '21 at 18:20
  • thanks, may I ask you how can I change the length of the line? I tried width at span: before but it only change the line length after the title – Allyssa Feb 04 '21 at 18:28
  • @Allyssa you wrap in other tag something like div. and set width for that tag. I updated my answer for this question – danhuong Feb 04 '21 at 18:32