CSS code:
ul {
list-style: none;
padding:0;
margin:0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: "• ";
color: #28B779; /* or any other color you like */
font-size:2em;
}<ul>
<li>English</li>
</ul>Is there a way to align the text with the bullet point? Currently, it looks like this:
Sharing my thoughts in the form of an answer.
To center the pseudo element, simply include vertical-align: middle.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: "• ";
color: #28B779;
/* or any color you like */
font-size: 2em;
vertical-align: middle;
}<ul>
<li>French</li>
</ul>In order to perfectly align them, you will need to apply the style vertical-align: middle to both the text and the pseudo-element. Since CSS selectors are unable to target text directly, you must enclose it in an additional element:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: "• ";
color: #28B779;
font-size: 2em;
}
li:before, li > span {
vertical-align: middle;
}<ul>
<li><span>English</span></li>
</ul>After trying everything possible, I am still unable to resolve my issue and it is leaving me puzzled. MY ISSUE Simplifying my page, I used the example from w3schools for a responsive navbar. When resizing the browser window, the navbar collapses correctl ...
Previously, I utilized the following code to extract text from the data-placeholder attribute and apply it as a placeholder for my div. [contentEditable=true]:empty:not(:focus):before { content:attr(data-placeholder) } While this method worked well b ...
I need to position 2 divs inside a container div. Their height should always be the same, regardless of content. To achieve this, I am using absolute positioning with top and bottom set to 0. Currently, the container div #three collapses and hides the cont ...
As a newcomer to phonegap, I am seeking a reliable and straightforward way to determine whether a device is a tablet or a phone. My current method involves comparing the width and height sizes of the screen - if the width is greater, then it is a tablet; o ...
Looking for assistance with a page called "diagnosticoST" that contains four buttons (btn-institucional, btn-economico, btn-social, btn-natural). These buttons have different background colors until the survey inside them is completed. Once the user comple ...
Why is it that the calculation for $total_pizza_size = $pizza_size; and $total_toppings = $toppings * 1.25; not working as expected? I defined my variables at the start of the program but keep encountering the error message "Fatal error: U ...
I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...
I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...
Looking for a solution to keep an image centered at the bottom of a website page regardless of screen size? I've tried different recommendations from Stack Overflow without success. position:fixed; bottom:0px; left:50%; Still struggling to make it wo ...
I am facing an issue with displaying images in a wide Datatables header. The design is based on the Zurb Foundation 5.5.3 framework. Does anyone know why this CSS code is being strikethrough in the image below? (you can view it at https://i.sstatic.net/l ...
My goal is to use Python to dynamically extract data from an HTML page that is constantly changing. I have identified that the specific data I am interested in is located between a tag that resembles 'abcd>' and another tag. For example: abcd& ...
Why does an element positioned absolutely within a div that has relative positioning end up slightly lower than the bottom of the parent div? What can be done to fix this issue without just adjusting the bottom value on .hoverAction? function showFileUp ...
Here is the code snippet I am struggling with: <table id="table" class="dataTable table table-hover table-md table-responsive" cellspacing="0" role="grid"> <thead> <tr> ...
Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...
I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...
I have a Facebook like box on my site but in some resolutions the profile pictures goes to next line after 2 pictures instead of 3 so I want to make the profile pictures width and height 49 instead of 50 because that would fix the problem. Here's how ...
Is there a way to create a similar design to the following: Some text ----------- Centered Button ----------- I have attempted the code below, but it doesn't quite achieve the desired look. .html <div class="dashed"> <span> ...
I'm currently working on my website using Next.js. In order to enhance the SEO performance of my site, I am making an effort to steer clear of duplicate meta tags. My Inquiry According to Next's official documentation, they suggest that using t ...
Context In my project, I am using PHP to generate a series of voting sections. Each section follows the same format except for a unique number assigned to it, which increases with each iteration of the PHP loop. To keep track of the unique numbers, I uti ...
My website features two stylesheets, one for day mode and one for night mode. There is an image on the site that triggers a function with an onclick event to switch between the two stylesheets. However, when new visitors click the button for the first ti ...