CSS technique for a horizontal line with words in the middle

by LuckyCat

HTML

<h1>Today mnjbdhjb dhjdgh jsghjs gshjgshjgs hjsghjsghsghsg shjgshs</h1>

https://overcoder.net/q/32921/%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA%D0%B0-css-%D0%B4%D0%BB%D1%8F-%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9-%D0%BB%D0%B8%D0%BD%D0%B8%D0%B8-%D1%81%D0%BE-%D1%81%D0%BB%D0%BE%D0%B2%D0%B0%D0%BC%D0%B8-%D0%B2-%D1%81%D0%B5%D1%80%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5



<!--

<!DOCTYPE html>
<html class="webKit">
   <head>
      <title>[page value='title']</title>      
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">      
      <style type="text/css">
            * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
            }
         .avatar {
           /*-webkit-mask-box-image: url(border.svg);*/
           -webkit-mask-box-image: url(border.svg);
           background: url(32b11.png) 0 0 no-repeat;
           background-size: cover;
           width: 300px;
           height: 560px;
         }
      </style>
   </head>
   <body>
      <!--<img class="avatar" src="32b11.png">-->
      <div class="avatar">aaa</div>
   </body>
</html>


-->

пицца солнце текст


https://css-tricks.com/clipping-masking-css/

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

http://css.yoksel.ru/css-and-svg-masks/


https://www.shagtogether.com/solo.html

CSS

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}

h1:after {
  margin-left: 20px;
}
h1:before{
  margin-right: 20px;
}