主页 / 问题 / 1158216
Accepted
Мирас Текесбаев
Asked:2020-07-28 16:21:46 +0000 UTC2020-07-28 16:21:46 +0000 UTC

如何在每个 p 后添加 hr？

  • 772

<article>
        <h3>What is Lorem Ipsum?</h3>
        <p>First</p>
        <h3>Where does it come from?</h3>
        <p>Second</p>
        <h3>Why do we use it?</h3>
        <p>Third</p>
</article>

您需要使用 JavaScript 在每个 p 标记后插入一个 hr 标记，以便在视觉上将段落彼此分开。你不能修改指定的标记，你只需要写一个带有代码的脚本。

可以做什么？使用哪种 DOM 方法？

javascript

3 个回答

  1. 为什么这里有 jQuery，它更容易；)

    纯 HTML 和 CSS： 

    p{
    margin: 3px 0px; 
    border-bottom: 1px solid black;
}
    <article>
    <h3>What is Lorem Ipsum?</h3>
    <p>First</p>
    <h3>Where does it come from?</h3>
    <p>Second</p>
    <h3>Why do we use it?</h3>
    <p>Third</p>
</article>

    • 8
  2. Best Answer

    document.querySelectorAll('p').forEach((elem) => {
    elem.insertAdjacentHTML('afterend', '<hr/>');
});
    <article>
    <h3>What is Lorem Ipsum?</h3>
    <p>First</p>
    <h3>Where does it come from?</h3>
    <p>Second</p>
    <h3>Why do we use it?</h3>
    <p>Third</p>
</article>

    • 7

  3. 或者你可以使用另一个伪元素::after

    *, *::after, *::before {
  box-sizing: border-box;
}

p::after {
  content: '';
  display: block;
  position: static;
  width: 100%;
  height: 1px;
  background-color: black;
  margin: 10px 0;
}
    <article>
  <h3>What is Lorem Ipsum?</h3>
  <p>First</p>
  <h3>Where does it come from?</h3>
  <p>Second</p>
  <h3>Why do we use it?</h3>
  <p>Third</p>
</article>

    • 6

相关问题