current position:Home>CSS to add horizontal lines around the text

CSS to add horizontal lines around the text

2022-04-29 05:17:36Angel's kind

css Add horizontal lines around the text

Method 1 、div Tag implementation

HTML:

          <div class="thirdLine">
            <span class="line"></span>
            <div class="txt">
              <span> Third party landing </span>
            </div>
            <span class="line"></span>
          </div>

CSS:

.thirdLine {
    
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .line {
    
    display: inline-block;
    width: 110px;
    height: 1px;
    background: #e4e7ed;
  }
  .txt {
    
    color: #bbbbbb;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    margin: 0 15px;
  }
}

Method 2 、fieldset Tag implementation

HTML:

          <fieldset>
            <legend> Third party landing </legend>
          </fieldset>

CSS:

fieldset{
    
  border: none;
  margin-top: 20px;
  border-top: 1px solid transparent;
  // Here I use the pure gray one , If you want a gradient, you can change it to two color values 
  border-image: -webkit-radial-gradient(#E4E7ED,#E4E7ED) 1 10;  
}
legend{
    
  font-size: 12px;
  text-align: center;
  padding: 0 10px;
  color: #bbbbbb;
}

Method 3 :element Component implementation

HTML:

<el-divider> Third party landing </el-divider>

CSS:

.el-divider--horizontal{
    
  margin: 26px 0 !important;
  .el-divider__text{
    
    color: #bbbbbb;
    font-size: 12px;
  }
}

The final effect of the above methods is shown in the figure :

 Insert picture description here

copyright notice
author[Angel's kind],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261122125310.html

Random recommended