Linked CSS Bullet Points

Question

Linked CSS Bullet Points

Typically, I focus on the backend of websites, but I am now attempting to add a new feature to my resume site. I want to connect bullet points with a vertical line that breaks at each point and does not overlap with the bullets themselves.

I have created a version of this feature, but there are a few issues that need to be addressed. The current implementation does not draw the line through the bullet points correctly, and adjusting the 'left' attribute only shifts the line around the bullets. Additionally, the line has a fixed size, whereas it should adjust dynamically based on the content.

If anyone knows how to fix these problems and create a more functional version of this feature in CSS, please share your knowledge. I have searched for existing solutions but haven't found one that meets all the requirements.

html css pseudo-element

Answer 1

Answer №1

To create a stylish bullet point with a line, you can utilize the border property for drawing the line and absolute positioning to adjust the position of your bullet. For example, you can use border-left to create a vertical line and border-bottom for a short horizontal line.

In order to achieve this effect, I recommend setting the list-style-type to none, adding your custom bullet using li:before, and adjusting padding within your ul element.

// Creating a custom bullet
li:before {
    display: block;
    position: absolute;
    left: 0; /* Position your bullet */
    height: 24px;
    width: 8px;
    content: ""; /* Add your bullet icon here */ }

// Adding a decorative line
li:after {
    display: block;
    position: absolute;
    content: "";
    top: 4px; // Adjust position if needed
    left: 4px; // Adjust position if needed
    border-left: 2px solid #ff5800; // Line color }

// Applying padding to the unordered list
ul {
    padding-left: 16px; }

// Code snippet demonstrating an alternative case for creating lines:
https://codepen.io/irwanphan/pen/REpQPO

This code is written in SASS format for better visualization. If converting to CSS, remember to add curly braces around elements and semicolons after each attribute declaration.

I hope this explanation helps you achieve the desired design. Thank you!

Answer 2

To create a stylish bullet point with a line, you can utilize the border property for drawing the line and absolute positioning to adjust the position of your bullet. For example, you can use border-left to create a vertical line and border-bottom for a short horizontal line.

In order to achieve this effect, I recommend setting the list-style-type to none, adding your custom bullet using li:before, and adjusting padding within your ul element.

// Creating a custom bullet
li:before {
    display: block;
    position: absolute;
    left: 0; /* Position your bullet */
    height: 24px;
    width: 8px;
    content: ""; /* Add your bullet icon here */ }

// Adding a decorative line
li:after {
    display: block;
    position: absolute;
    content: "";
    top: 4px; // Adjust position if needed
    left: 4px; // Adjust position if needed
    border-left: 2px solid #ff5800; // Line color }

// Applying padding to the unordered list
ul {
    padding-left: 16px; }

// Code snippet demonstrating an alternative case for creating lines:
https://codepen.io/irwanphan/pen/REpQPO

This code is written in SASS format for better visualization. If converting to CSS, remember to add curly braces around elements and semicolons after each attribute declaration.

I hope this explanation helps you achieve the desired design. Thank you!

Linked CSS Bullet Points

Answer №1

Similar questions

Conditionally assign a class to the body tag in your Jade template

Develop a straightforward static webpage and set it up by installing and launching it using NPM

Transform a dropdown menu into an inverted footer

Attempting to include a navigation bar within the footer section of my layout page - the master page on my website

What dimensions are optimal for images on a Responsive web design?

What is the best way to select photos from a directory and showcase them on a webpage using HTML

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

Create a CSS animation that causes a div element to smoothly float out of the document

How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

The text feature for the Google Places API is not displaying properly within the MUI TextField

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

Graphics distorting on android devices when implementing createjs and canvas technology

How to capture text outside of a HTML tag using Selenium with Python?

What is the best way to incorporate a button that can toggle the visibility of the sidebar on my post page?

What is the best way to transfer an object property to an event handler function for executing DOM manipulation tasks?

Struggling to showcase array data in a visually appealing table format?

Trouble with displaying label in PDF post HTML conversion using iText html2pdf

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

Implementing CSS and JS for targeted elements or functions in WordPress