Блог

Я хотел бы создать рамку, подобную картинке ниже. Но у меня заканчиваются идеи о том, как это сделать.

https://codepen.io/szn0007/pen/VRGPyE

 div.about-me h2{
  color: #000;
  border-bottom: 1px solid #efefef;
  width: 20%;
  margin: 0 auto;
  padding: 20px;
}
  

Заранее благодарю вас.

К счастью, с помощью CSS у вас есть доступ к двум псевдоэлементам в каждом контейнере. Я добавил звездочку к одному из псевдоэлементов :after , а строку — к другому :before .

Например:

 .fancy-underline {
  position: relative;
  display: inline-block;
}

.fancy-underline:before {
  content: '';
  position: absolute;
  top: calc(100%   10px);
  left: 0;
  width: 100%;
  height: 1px;
  background: grey;
}

.fancy-underline:after {
  content: '*';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}  

 <h2 class="fancy-underline">About Me</h2>  

попробуйте это:

            <div class="about-me">
           <h2>About Me</h2>
           <p>*</p>
           </div>
  

css:

           div.about-me{
           width: 100%;
          text-align: center;
          }

          div.about-me h2{
          color: #000;
          border-bottom: 1px solid #efefef;
          width: 20%;
          margin: 0 auto;
          padding: 20px;
          }

         p {
         font-size: 50px;

         transform: translatey(-72px);

         }