When my list breaks into multiple lines on certain screen sizes, I'm facing an issue where the list bullet doesn't align vertically in the middle of the text.
I want the bullet to show up next to the second line if there are 3 lines inside the same list element, and between the two lines if there are only 2 lines.
I've experimented with vertical-align without success and haven't found a suitable solution for my question yet.
Traditional bullet points do not offer the flexibility for customization in this way.
To achieve the desired alignment, a pseudo-element can be created for the marker and then aligned using techniques like flexbox.
li {
width: 300px;
display: flex;
align-items: center;
}
li:before {
content: "\2022";
margin-right: 1em;
}
.wider {
width: 450px;
}<ul>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis perferendis tempore nesciunt, cum molestias ut necessitatibus nostrum incidunt adipisci odio.</li>
</ul>
<ul>
<li class="wider">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis perferendis tempore nesciunt, cum molestias ut necessitatibus nostrum incidunt adipisci odio.</li>
</ul>Here's a cool trick using the border-image property to update the default marker design
ul {
font-size: 20px;
}
ul li {
list-style: none;
/* .2em = radius
20px = control the position
*/
border-image:
radial-gradient(circle closest-side at .2em 50%,#000 80%,#0000)
fill 0//20px
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis neque felis. Pellentesque commodo velit diam, a egestas nisi molestie sed. Phasellus luctus lobortis orci nec venenatis.</li>
<li>Lorem ipsum dolor sit amet, consectetur </li>
</ul>In the code snippet below, you will find an ul list with a ::before pseudo-class applied to the li element. This creates a visually aligned dot next to each list item. I hope this fulfills your desired outcome.
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
li::before {
content: "•";
margin-right: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>List Alignment Example</title>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
</ul>
</body>
</html>Is there a way to smoothly insert HTML codes into all website pages without compromising the CSS design? I've attempted using but found it messy. Is there a simpler method to insert the HTML file into other files? The HTML file I'm trying to lo ...
Is there a way to replace the for loop with the map method? The data structure for book.pages is in the format [{},{},{}] I tried using the size method and included this line console.log("book.pages.map.size();--->", book.pages.map.si ...
I am dealing with a form that contains several required fields. You can find an example here <div class="form-group"> <label class="col-md-3 control-label" for="mpassword">Password<span class="required">* </span>< ...
Check out this online store: On the site, you'll notice the menu at the top with options like Home and Chain Saw Safety. Despite my best efforts to adjust the CSS, I can't seem to get it all to fit on one line. I've played around with the ...
I have node-sass installed with the options set according to the guidance provided in a response on Using node-sass watch option with npm run-script, however, I am facing issues with it not working as expected. Below is the content of my package.json file ...
Is there a way to automatically generate unique background colors for list elements? Check out this html snippet that displays list items with different background-colors. <ul> <li> <a href=#">I am the first element</a> ...
Can someone help me figure out why the background color isn't changing on my website? I'm not a fan of CSS so please go easy on me. App.css body { background-color: darkslategray; } App.js import { Box, ChakraProvider, Image } from "@c ...
Can JavaScript be used to apply media queries style based on random window sizes? I have 5 buttons that I want to switch styles for using JavaScript according to the media queries defined in my CSS stylesheet. Is there a method to achieve this? ...
I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes. Here is how I create my dropdowns: @<div class="row"> <div class="col-md-4"> ...
I'm having some trouble creating a layout using CSS Grid. My goal is to make the header element 'sticky', so that it remains fixed at the top of the viewport while other content scrolls up and underneath it. Additionally, I want to add a bac ...
I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...
At the moment, I house all of the meta tags within a div element inside the Header. I created an AMD module to retrieve these meta tags by accessing the div. <div id="serverInfo"> <meta id="environment" name="environment" content="DEV" /&g ...
I am encountering an issue when searching the date field in my MySQL database. I have an HTML form that allows users to search the database in three different ways: by student_id, last name, or date. When I run the program and choose student ID or last nam ...
Currently, I am displaying data from the "login" table in MySQL using PHP within an HTML table. Take a look at the code snippet below: <table class="table"> <thead class="thead-dark"> < ...
I am looking to create a mobile webpage that allows me to swipe my finger left or right in the middle of the page to scroll between images. Here is an example photo: I want to be able to swipe through the images with my finger. Any suggestions on how I ...
I'm facing an issue while attempting to display a table containing users' SQL data onto an HTML page. Let's assume that the connection is established and there is indeed information in the table. <?php echo "<table> &l ...
My objective is to transmit each individual "finput" observation into an HTML form under the name "text". The process works smoothly when dealing with a single observation. However, I am encountering difficulties while attempting to iterate through the ve ...
I am new to Angular 4 and encountering an issue with using *ngFor in conjunction with HTML drop-down select and option elements. My categories array-object looks like this - categories = [ { id:1, title: 'c/c++'}, { id:2, title: 'JavaScri ...
I am experiencing an issue when trying to select a dropdown from a group of multiple elements, as one specific dropdown cannot be selected. The error message I receive is: => {"message":"unknown error: Element ... is not clickable at point (433, 15). Ot ...
I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...