Display at:hover with pseudo element?



  • Started studying HTML/CSS, with a future mission, using BMS technology.

    .main {
        width: 300px;
        height: 400px;
        margin: auto;
        background-color: #e3e3e1;
    }
    .main__title {
        padding: 20px;
        background-color: #999999;
        color: #fff;
    }
    .main__license {
        color: #73687f;
        position: relative;
    }
    .main__license--borderBottom {
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #d3d3d1;
    }
    .main__license--borderBottom:hover::before {
        content: '✔ ';
        color: #8d87a0;
        font-weight: bold;
        padding-left: 5px;
    }
    <div class="main">
        <div class="main__title">TITLE</div>
        <div class="main__license">
            <div class="main__license main__license--borderBottom"><span class="main__license--checkBox">
                </span>LICENSES</div>
            <div class="main__license main__license--borderBottom">Element_1</div>
            <div class="main__license main__license--borderBottom">Element_2</div>
            <div class="main__license main__license--borderBottom">Element_3</div>
            <div class="main__license main__license--borderBottom">Element_4</div>
        </div>
    </div>


    The idea is that when a mouse is placed on the element, the symbol "ом" will be displayed before the text.

    But for some reason, when you're at it, you're going to have to take a single picsel down, you might be surprised. border-bottom

    Not a very obvious moment at the current moment, which is the cause of such behaviour.

    Question:
    What is the reason for the increase in the cell block at hover with properties content:?



  • It's the line-height. http://htmlbook.ru/css/line-height

    Decision: add for .main__license--borderBottom:hover::beforeline-height: 1

    * {
      box-sizing: border-box;
    }
    .main {
      width: 300px;
      height: 400px;
      margin: auto;
      background-color: #e3e3e1;
    }
    .main__title {
      padding: 20px;
      background-color: #999999;
      color: #fff;
    }
    .main__license {
      color: #73687f;
      position: relative;
    }
    .main__license--borderBottom {
      padding: 10px 0;
      border-bottom: 1px solid #d3d3d1;
    }
    .main__license--borderBottom:hover::before {
      content: '✔ ';
      line-height: 1;
      color: #8d87a0;
      font-weight: bold;
      padding: 0 5px;
    }
    <div class="main">
        <div class="main__title">TITLE</div>
        <div class="main__license">
            <div class="main__license main__license--borderBottom">
                <span class="main__license--checkBox"></span>LICENSES
            </div>
            <div class="main__license main__license--borderBottom">Element_1</div>
            <div class="main__license main__license--borderBottom">Element_2</div>
            <div class="main__license main__license--borderBottom">Element_3</div>
            <div class="main__license main__license--borderBottom">Element_4</div>
        </div>
    </div>

    https://jsfiddle.net/wm2dvgya/




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2