使 Html 标签在网站上可见以使其看起来不错答案

【问题标题】：Making Html Tags Visible on Website To Make It Look Good使 Html 标签在网站上可见以使其看起来不错
【发布时间】：2022-10-15 15:56:16
【问题描述】：

如何使我的网站看起来从：

这个样子：

我正在使用 CSS、JavaScript 和 Html，但我不知道如何在我的网站上实现这种类型的外观

【问题讨论】：

请创建一个Minimal reproducible example
欢迎来到堆栈溢出！请访问help center，使用tour 了解内容和How to Ask。做一些研究-search SO for answers。如果您遇到困难，请发布您的尝试的minimal reproducible example，使用[<>] sn-p 编辑器记录输入和预期输出。
这是一个 X/Y 问题。只需制作背景图像
请您分享您的源代码。

标签： html css

【解决方案1】：

CSS 和图像

.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #0F0E0E;
}

.side {
  width: 125px;
  height: auto;
  min-width: 125px;
  background-image: url(https://i.stack.imgur.com/B6aic.png);
  background-repeat: no-repeat;
}

.content {
  font-family: "Bahnschrift light", "sans-serif";
  font-size: 5em;
  color: white;
  padding-top: 5%;
}

<div class="main">
  <div class="side"> </div>
  <div class="content">Simpfey</div>
</div>

【讨论】：

...但是您的 HTML 中没有 <h3> 元素。
为什么需要？
...否则它是不诚实和/或不正确的：它是 <div> 宣传自己，好像它不是 <h3>。
这是一个视觉效果，显示花花公子做 HTML。它有什么不诚实的？
...因为<div> 不是<h3>。

【解决方案2】：

添加行 (div) 并在其上使用 ::before 和 ::after。

body {
    margin: 40px;
    background-color:#0f0e0e;
    font-family:Arial;
}

.flex {
    display: flex;
}
.flex > div:last-child {
   margin:10px 0 10px 15px;
}
.flex h1 {
   color:#d7d6d6;
   font-weight:100;
   margin:0;
}
.flex p {
  margin:0;
  color:#a6a3a5;
  font-size:0.9rem;
  font-weight:100;
  margin-top:10px;
}
.line {
    width: 1.5px;
    background: #333030;
    position: relative;
    margin-right: 10px;
}

.line::before {
    content: "<h3>";
    position: absolute;
    color:#363131;
    top: 0;
    transform: translate(-43%, -100%);
}

.line::after {
    content: "</h3>";
    color:#363131;
    position: absolute;
    bottom: 0;
    transform: translate(-45%, 100%);
}

<body>
   <div class="flex">
      <div class="line"></div>
      <div>
         <h1>Simpfey</h1>
         <p>An Indie Web Dev.</p>
      </div>
   </div>
</body>

【讨论】：

看起来不太像图片。
@mplungjan 现在看起来。