我想使用 HTML/CSS 生成像附加图像一样的行答案

【问题标题】：I want to generate line as like attached image using HTML/CSS我想使用 HTML/CSS 生成像附加图像一样的行
【发布时间】：2022-11-15 12:02:57
【问题描述】：

我想使用 HTML/CSS 生成像附加图像一样的行

我尝试过使用两个不同的 div，但没有产生预期的结果。

对此有任何想法。

我尝试过使用两个不同的 div，但没有产生预期的结果。

【问题讨论】：

你试过什么了？那条线的目的是什么（滑块，只是装饰，进度条？）？
我试过两个不同边框的div，这只是页面标题下面的一行..没有别的
这样做的目的是什么？定义了应该使用的元素

标签： html css

【解决方案1】：

您可以使用：：后和内容在CSS中。

    <!DOCTYPE html>
    <html>
    <style>
    #demo {
    position:relative;
    border-bottom:2px solid black;
    }
    #demo:after{
    content:"";
    border:3px solid red;
    position:absolute;
    width:10%;
    left:0;
    bottom:-4px;
    }
    </style>
    <body>
    <p id="demo">This is a paragraph</p>
    </body> 
    </html>

这只是一个例子，向您展示它是如何工作的。您可以根据需要自定义它。

【讨论】：

【解决方案2】：

这可能对你有帮助。

https://www.w3schools.com/tags/tag_hr.asp

它还在页面上提供了一个测试演示，但它可能会帮助您处理页面上的行，我使用了他们的一些代码，它们非常有帮助。

<!DOCTYPE html>
<html>
  <body>
<h1>The Main Languages of the Web</h1>

<p>
  HTML is the standard markup language for creating Web pages. HTML
  describes the structure of a Web page, and consists of a series of
  elements. HTML elements tell the browser how to display the content.
</p>

<hr />

<p>
  CSS is a language that describes how HTML elements are to be displayed on
  screen, paper, or in other media. CSS saves a lot of work, because it can
  control the layout of multiple web pages all at once.
</p>

<hr />

<p>
  JavaScript is the programming language of HTML and the Web. JavaScript can
  change HTML content and attribute values. JavaScript can change CSS.
  JavaScript can hide and show HTML elements, and more.
</p>
  </body>
</html>

【讨论】：

如果这应该是一个滑块怎么办？除此之外，那与图片并不接近。对于纯粹的设计目的，普通的块级元素而不是具有线性渐变的替换元素会更好。
如果它需要是一个滑块，我最接近的方法是使用 (overflow: scroll;) 但这就像 Web 浏览器上的普通滚动滑块一样。但这可能无法解决滚动的样式