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

ifmq2ha2  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(109)

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

我已经尝试了两个不同的div,但没有产生预期的结果。
对这个有什么想法。
我已经尝试了两个不同的div,但没有产生预期的结果。

6ojccjat

6ojccjat1#

您可以在css中的content之后使用::来实现这一点。

<!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>

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

qrjkbowd

qrjkbowd2#

这可能对你有帮助。
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>

相关问题