javascript - CSS3 内容中的 HTML 值

Question

我正在尝试将年份数字沿垂直时间轴放置成圆形。 我最初的想法是使用 CSS 内容，也许通过使用 javascript 从 HTML 中提取一些数据属性，比如 year="1958"并将其放入圆圈中。怎么做？是否可以重新定位该年份数字以使其完全适合圆圈？ HTML 和 CSS 紧随其后。下面有一个指向同一个代码笔的链接。

* {
  box-sizing: border-box;
}
    /* Set a background color */
    body {
      background-color: #181818;
      font-family: Helvetica, sans-serif;
      line-height:1.6;
      font-weight:500;
      text-align:left;
    }
    
    /* The actual timeline (the vertical ruler) */
    .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .year1958 {
      content: '1958';
      
    }
    
    /* The actual timeline (the vertical ruler) */
    .timeline::after {
      content: '';
      position: absolute;
      width: 1px;
      background-color: #b69472;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
    }
    
    /* Container around content */
    .container {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }
    
    /* The circles on the timeline */
    .container::after {
      color: #b69472;
      margin:px;
      content: "";
      position: absolute;
      width: 66px;
      height: 66px;
      right: -33px;
      background-color: #181818;
      border-color: #b69472;
      border-style: solid;
      border-width:1px;
      top: 15px;
      border-radius: 50%;
      z-index: 1;
    }
    
    .circlecontainer {
      color: #b69472;
      margin:px;
      content: "XXXX";
      position: absolute;
      width: 66px;
      height: 66px;
      right: -33px;
      background-color: #181818;
      border-color: #b69472;
      border-style: solid;
      border-width:1px;
      top: 15px;
      border-radius: 50%;
      z-index: 1;
    }
    
    /* Place the container to the left */
    .left {
      left: 0;
      text-align:right;
    }
    
    /* Place the container to the right */
    .right {
      left: 50%;
    }
    
    /* Fix the circle for containers on the right side */
    .right::after {
      left: -36px;
    }
    
    /* The actual content */
    .content {
      color:#b69472;
      padding: 20px 30px;
      background-color: #181818;
      position: relative;
      border-radius: 6px;
    }
    
    .contentboxr {
      color:#b69472;
      padding: 20px 30px;
      background-color: #181818;
      position: relative;
      border-style: solid;
      border-left: 1px;
      border-left-color:#181818;
      border-width:1px;
      left:-43px;
      z-index:5;
    }
    
    .containerbox {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }
    
    .contentboxr::after {
      display: none !important;
      visibility: hidden;
    }
    
    /* Media queries - Responsive timeline on screens less than 600px wide */
    @media screen and (max-width: 600px) {
    /* Place the timelime to the left */
      .timeline::after {
        left: 51px;
      }
    
    /* Full-width containers */
      .container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
      }
      .contentboxr {
      color:#b69472;
      padding: 10px 20px;
      background-color: #181818;
      position: relative;
      border-style: solid;
      border-left: 0px;
      border-left-color:#181818;
      border-right: 0px;
      border-right-color:#181818;
      width:280%;
    }
    
    /* Make sure that all arrows are pointing leftwards */
      .container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
      }
    
    /* Make sure all circles are at the same spot */
      .left::after, .right::after {
        left: 15px;
      }
    
    /* Make all right containers behave like the left ones */
      .right {
        left: 0%;
        text-align:left;
      }
      .left {
        text-align:left;
      }
    }

<div class="timeline">
      <div class="container left">
        <div class="content">
          <p>Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.</p>
        </div>
      </div>
      <div class="container right">
        <div class="content">
          <p>Lorem ipsum..</p>
        </div>
      </div>
        <div class="container left">
        <div class="content">
          <p>Lorem ipsum.... LEFT</p>
        </div>
      </div>
      <div class="containerbox right" yearyear="1234">
        <div class="contentboxr">
          <h3 style="line-height:1.8;"><em>Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum...</em></h3>
        </div>
      </div>
        <div class="container left">
        <div class="content">
          <h2>2017</h2>
          <p>Lorem ipsum..</p>
        </div>
      </div>
    </div>

https://codepen.io/drol/pen/oVbKva

Answer 1

您可以在 Circle html 元素上使用自定义“数据”属性 + css 中的 css3 attr 函数。

这是一个例子:

p:before {
  content:attr(data-foo) " ";
}

<p data-foo="Hello">World</p>