Utilizing HTML values within CSS3 content

I'm looking to integrate year numbers into circular shapes along a vertical timeline. My initial concept involves using CSS content and possibly leveraging JavaScript to extract data properties from the HTML, such as year="1958", and inserting it into the circle. Is there a way to reposition the year number so that it aligns perfectly within the circle? Below you'll find the accompanying HTML and CSS code snippet.

* {
  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..</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

javascriptjqueryhtmlcss

Answer №1

Utilizing custom "data" attributes in the Circle HTML element along with the css3 attr function is a great way to enhance styling.

Check out this code snippet for an example:

p:before {
  content:attr(data-bar) " ";
}
<p data-bar="Goodbye">World</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

cssresponsive-design

Using iTextSharp in .Net to convert the action result into a downloadable pdf file via ajax

I have been successfully using iTextSharp to convert a razor view into a downloadable PDF via a C# controller. While the current implementation is functioning perfectly, I am seeking a way to transmit a model from a view to the PDF controller and enable th ...

javascriptc#jqueryajaxitext

Position multiple div elements at the top with CSS alignment

Hey there! I have a question about the HTML and CSS code snippet below. I'm trying to align the text in the <h2> tags at the top for all three <div class="article-col-3"> containers, but it's currently aligned at the bottom. ...

css

What is the best way to monitor changes in objects within a JavaScript array?

Currently, I am in the process of developing a Todo application using electron and Vue.js. In my project, there is an array of objects called items. Each object follows this format: {id: <Number>, item: <String>, complete: <Boolean>, ...

javascriptarraysvue.jsvuejs2javascript-objects

What is the best way to implement gravity in order to make my character jump effectively

As a beginner in the world of coding, I am currently working on creating a game. However, one major challenge I am facing is simulating gravity to make my character jump effectively. Despite trying various methods, I have encountered disappointing results. ...

javascriptcsshtml5-canvas

Rotating Character in Three.js

I need help adjusting the direction in which a character is facing at spawn in three.js. I referenced an example from to add the character to my scene. While following advice from , I encountered issues with the character controls due to rotation. Curren ...

javascriptthree.jsrotation

Enabling custom file extensions for JavaScript IntelliSense in VS Code: A step-by-step guide

The title of this query reveals my predicament. In our organization, we employ an unconventional file extension for source code written in JavaScript. It appears that switching the file extension to ".js" triggers IntelliSense. My curiosity lies in whethe ...

javascripttypescriptvisual-studio-codeintellisensefile-extension

Streaming RTMP video through a WebView

Currently, I am working on implementing rtmp streaming using WebView. To achieve this, I referred to the code provided on Stack Overflow under this link The easiest way to play an audio RTMP stream in Android, which was shared by a user named Club. After a ...

javascriptandroidhtml

Tailwind - make sure the dropdown list is always on top of all other elements

Having an issue configuring the position of a dropdown list. The objective is to ensure it stays on top of all elements, however, when inside a relative positioned element, it ends up being obscured by it. Here's an example code snippet to illustrate ...

htmlcssfrontendpositiontailwind-css

Encountering OAuthCallbackError while using Next.js Auth

I am currently working on developing an app for analyzing Spotify data. However, I am encountering an error related to authorization. Below is the content of my auth file: Here is the code snippet: import NextAuth from "next-auth"; import Spotif ...

javascriptreactjsapinext.jsspotify

What is the necessity for an additional item?

After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery. In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an i ...

javascriptangularjs

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

Use jQuery to easily add and remove rows from a table dynamically

Is there a way to dynamically add rows to an HTML table using jQuery by utilizing a popup window? The popup would contain text fields, checkboxes, radio buttons, and an "add" button. Upon clicking the "add" button, a new row would be added to the table. ...

javascriptjqueryhtml

Utilizing jQuery's then() method to display HTML and JSON outputs from printing operations

Currently, I am in the process of mastering jquery deferreds. When working with html on jsfiddle, I receive an object that contains two lines when printed within the then() statement: "success" and the html returned by the ajax request. For instance, upo ...

javascriptjqueryjsonjquery-deferred

AngularJs: Activate the Submit Button only when a file upload path has been chosen

Hey, I'm currently learning AngularJS and I'm trying to figure out how to disable the upload button until a file is selected. I've tried the code below, and while the button gets disabled, it doesn't become enabled after selecting a fil ...

htmlangularjsbuttonfile-upload

Is the flowplayer software free for use on a production server?

Here is the URL I am implementing to stream videos on my website: I would like to know if it is permissible and cost-free to use in a production environment. ...

htmlvideoflowplayer

Strategies for updating the 'prevState' variable in React.js

I've encountered an array of objects that I need to update the state for. Toggling between the first and second items in the array, the value of isTrue changes from false to true. However, I want the first item to have isTrue: true, and only when I cl ...

javascriptarraysreactjs

Issue with IE7: jQuery.getJSON callback not triggering

A legitimate JSON file, returned with the correct HTTP headers: Content-Type:application/json; charset= Displays properly in Chrome/FF, but IE7 is having trouble parsing it. Where should I start investigating? $.getJSON(url, null, function(data){ aler ...

jqueryajaxjsoninternet-explorer-7jsonlint

Conceal the slider thumb within the material-ui framework

I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here. Below is my code snippet: import * ...

javascriptcssmaterial-uislider