How to draw a line with css and show text or image on it

后端 未结 4 1591
后悔当初
后悔当初 2021-01-22 17:26

I\'m trying to draw a line using CSS and show text/image in the middle of the line.

4条回答
  •  醉梦人生
    2021-01-22 17:54

    Wrap the text inside a span and use a :pseudo-element for the line.

    Position the line(:pseudo-element) behind the span using z-index: -1, so that you could move around the text without having to worry about the line.

    .featured-images {
      position: relative;
      color: #666666;
      border: 2px solid #333333;
      padding: 0 10px 0 30px;
    }
    .featured-images span {
      color: #666666;
      background: white;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: #666666;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }


    Replicating the following:

    enter image description here

    enter image description here

    enter image description here

    You could use repeating-linear-gradient to do this.

    body {
      background: #E7EAE3;
    }
    .featured-images {
      position: relative;
      color: #666666;
      padding: 0 10px 0 30px;
      overflow: hidden;
    }
    .featured-images span {
      color: #517575;
      background: white;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 120%;
      height: 100%;
      background: -webkit-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
      background: -moz-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
      background-size: 10px 31px;
      margin-left: -30px;
      transform: skew(-45deg);
      left: 0;
      z-index: -1;
    }


    Using image instead of text.

    .featured-images {
      position: relative;
      color: #666666;
      border: 2px solid #333333;
      padding: 0 10px 0 30px;
    }
    .featured-images span {
      display: block;
      width: 80px;
      height: 13px;
      background: url(http://lorempixel.com/80/13) no-repeat white 10px 0;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: #666666;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }

提交回复
热议问题