Before is placed following it's parent

Question

I have a problem with my before.

Here is the code of the before :

.skills-family .skills-family-header:before {
    position: absolute;
    content: "";
    background: #374C58 !important;
    height: 3px;
    left: 0;
    bottom: 0;

    right: 10%;

    -ms-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

So it should underline the ".skills-family-header" element, but the fact is that this before is placing according to it's great-parent, and I don't understand how it can be possible.

#skills-window .window-content {
  margin-bottom: 50px;
}


/** Global style **/

#skills-window p {
  font-size: 18px;
  margin-bottom: 4px !important;
}


/** Profile picture **/

#skills-window .profile-image-container {
  border-radius: 50%;
  height: fit-content;
  width: fit-content;
  overflow: hidden;
  margin: auto;
}

#skills-window .profile-image-container img {
  transform: scale(1);
  -ms-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#skills-window .profile-image-container:hover img {
  transform: scale(1.2);
}


/** General informations **/

#skills-window .name {
  font-weight: bold;
  font-size: 45px;
  line-height: 80px;
  margin: 0px 5px;
}


/** Skill family **/

.skills-family-header ion-icon {
  vertical-align: middle;
}

h3.skills-family-header {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

h4.skills-family-header {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}

.skill-family-content {
  display: none;
}


/** Skill row **/

#skills-window .skill .skill-name {
  margin: auto 20px !important;
}

.skill-level-container {
  height: 50px !important;
  width: 50px !important;
}


/** Before animation */

.skills-family .skills-family-header:before {
  position: absolute;
  content: "";
  background: #374C58 !important;
  height: 3px;
  left: 0;
  bottom: 0;
  right: 10%;
  -ms-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.skills-family.opened .skill-family-content:before {
  /* If unselected */
  right: 100%;
}

.skills-family .skill-family-content:after {
  position: absolute;
  content: "";
  background: #374C58 !important;
  width: 3px;
  left: 0;
  top: 0;
  bottom: 100%;
  -ms-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.skills-family.opened .skill-family-content:after {
  /* If unselected */
  bottom: 10%;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
</head>

<body>
  <div id="skills-window" class="window active text-center bg-light" style="display: block;">
    <div class="row">
      <div class="window-content col-md-11 mx-auto">
        <h2 class="window-title">Compétences</h2>
        <!-- Skills window content -->
        <div class="col-md-11 mx-auto">
          <div class="row">

            <!-- Informations -->
            <div class="col-md-9">
              <!-- name -->
              <div class="row name">
                <span class="name mx-2">B.</span>
                <span class="first-name mx-2">Hedwin</span>
              </div>

              <!-- Genaral informations -->
              <div class="row">
                <div class="col-md-4 text-left">
                </div>

                <!-- Languages skills -->
                <div class="languages col-md-3 text-left">
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Français</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-100"></canvas>
                    </div>
                  </div>
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Anglais</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end row (resume header with profile picture and general information) -->
          <!-- End information -->

          <!-- Skills -->

          <!-- Computer science skills -->
          <div id="csi-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Compétences en informatique
            </h3>
            <div id="target" class="skill-family-content col-md-11">
              <div class="d-flex justify-content-around w-100">
                <!-- First col -->
                <div class="col-md-4">
                  <!-- Intelligence artificielle -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Intelligence artificielle</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-65"></canvas>
                    </div>
                  </div>

                  <!-- Algorithmie -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Algorithmie</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                    </div>
                  </div>

                  <!-- Programmation web -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Programmation web</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- end first col -->

                <!-- Second col -->
                <div class="col-md-4">

                  <!-- Systèmes et réseaux -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Systèmes et réseaux</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-30"></canvas>
                    </div>
                  </div>

                  <!-- Optimisation -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Optimisation</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                    </div>
                  </div>

                  <!-- Programmation logiciel -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Programmation logiciel</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-50"></canvas>
                    </div>
                  </div>
                </div>
                <!-- end second col -->
              </div>
              <!-- end layout -->
            </div>
            <!-- end family content -->
          </div>
          <!-- end csi skills family -->

          <!-- Programming languages skills -->
          <div id="programming-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Compétences en programmation
            </h3>
            <div class="skill-family-content col-md-11">
              <div id="famille_programmation_logiciel" class="skills-family row w-100">
                <h4 id="titre_programmation_logiciel" class="skills-family-header">
                  Programmation logiciels
                </h4>
                <div id="contenu_programmation_logiciel" class="skill-family-content col-md-11 mx-auto">
                  <div class="d-flex justify-content-around w-100">
                    <!-- skill family content layout -->
                    <!-- First col - Python -->
                    <div class="col-md-3">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Python</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_python" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-90"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- End first col -->

                    <!-- Second col - Java -->
                    <div class="col-md-2">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Java</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_java" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                        </div>
                      </div>

                    </div>
                    <!-- end second col -->

                    <!-- Third col - C++ -->
                    <div class="col-md-2">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">C++</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_c++" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- End third col -->
                  </div>
                  <!-- end skill family content layout -->
                </div>
                <!-- end family content -->
              </div>
              <!-- End software programming languages skills -->

              <!-- Web programming languages skills -->
              <div class="skills-family row w-100">
                <h4 class="skills-family-header">
                  Programmation web
                </h4>
                <div class="skill-family-content col-md-11 mx-auto">
                  <div class="d-flex justify-content-around w-100">
                    <!-- skill family content layout -->
                    <!-- First col -->
                    <div class="col-md-4">
                      <!-- HTML -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">HTML</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-70"></canvas>
                        </div>
                      </div>

                      <!-- JS -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">JS</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-75"></canvas>
                        </div>
                      </div>

                      <!-- JEE -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Java et JEE</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-55"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- end first col -->

                    <!-- Second col -->
                    <div class="col-md-4">
                      <!-- CSS -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">CSS</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                        </div>
                      </div>

                      <!-- PHP -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">PHP</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- end second col -->
                  </div>
                  <!-- end skill family content layout -->
                </div>
                <!-- end family content -->
              </div>
              <!-- End web programming languages skills -->
            </div>
          </div>

          <!-- Others skills -->
          <div id="working-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Autres compétences
            </h3>
            <div class="skill-family-content col-md-11">
              <div class="d-flex justify-content-around w-100">
                <!-- First col -->
                <div class="col-md-4">
                </div>
                <!-- end first col -->

                <!-- Second col -->
                <div class="col-md-4">
                </div>
                <!-- end second col -->
              </div>
              <!-- end layout -->
            </div>
            <!-- end family content -->
          </div>

        </div>
        <!-- end col-md-11 -->
      </div>
    </div>
  </div>
</body>

</html>

Thanks for any help, or advice about this question.

Hedwin B.

You probably just need to position the parent, like `position: relative`, because an element with `position: absolute` is positioned relative to the nearest positioned ancestor. — H K, Aug 05 '20 at 17:21

score 1 · Accepted Answer · answered Aug 05 '20 at 17:34

1

I see some minor issues:

you use : where you should be using ::
your reference a class ion-icon that doesn't exist
your use of absolute position is relative i.e. you must declare the element you want the absolute to be relative too.

assuming you want it relative to skills-family add the following css:

.skills-family{
   position: relative;
}

answered Aug 05 '20 at 17:34

DCR

14,737
12
52
115

Thx ! I saw : instead of :: in many tutorials and forum, i learned to use :: but i mostly see : are you shure that :: is the best practice ? ion-icon exist in my code, i didn't copy it inside the fiddle html because it's not linked to the problem. Finaly, thank you for the third advice, it solved it ^^ – Hedwin Bonnavaud Aug 05 '20 at 20:16
i just saw in js fiddle it complained about : – DCR Aug 05 '20 at 20:21

Before is placed following it's parent

1 Answers1