• 伪元素的margin值挤压主体元素解决


    伪元素的margin值挤压主体元素解决

    主体是两个p标签,需要再其左侧添加一个竖线,很常见的需求

    目标

    图片描述

    前提条件

    1. 右侧的文字个数不固定
    

    问题

    1. 需要让before元素为`float:left`;
    2. 文字个数不固定时,整个元素的宽度是auto,根据文字的内容来算,此时使用 :before伪元素时,如果伪元素占据的宽度过大,会导致文字被挤下去
    
    
    .demo:before{
      float: left;
      height: 67px;
      content: '';
      border-right: solid 3px $primary;
      border-left: solid 2px $primary;
      margin-right: 10px;
    }

    效果

    解决

    margin-right: 10px; 改为margin-left: -10px; 使之不占据主体的空间

    jsfiddle

    本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h02cacchjjb

  • 相关阅读:
  • 原文地址:https://www.cnblogs.com/10manongit/p/12755944.html
  • 最新文章
  • 热门文章
一二三 - 开发者的网上家园