How can I use ::before and ::after elements on list items?
Let's say I have the following:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
Is it possible to target a specific list item, like the last one, and add an ::after element only to that item?
ul li:nth-child(3)::after
{
content: "";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}
Absolutely, you can definitely utilize it, just be sure to apply position:absolute to enable the use of height and width for your pseudo element.
ul li:nth-child(3)::after {
display block;
position: absolute;
content: "";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three3</li>
</ul>Implementing the CSS solution is straightforward - you have the option to utilize either nth-child or last-child in conjunction with :after.
http://jsbin.com/xatuve/edit?html,css,output
ul li:last-child:after {
content: "";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}
Absolutely, you are able to utilize this feature. Take a look at the following demonstration:
ul li:nth-child(3)::after
{
content: "Test";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>As a newcomer to Angular, I am facing a challenge that has left me unable to find a solution. Below is the code snippet in question: <mat-form-field> <input matInput placeholder="ZIP" style="color:red;"> </mat-form-field& ...
My goal is to give users the option to link their social media accounts such as Facebook and Twitter, with each link displaying an image that corresponds to the platform. The intention is for these images to direct them to the links stored in the database. ...
Consider an SVG element with various components: <div style="margin-left:50px; width: 100%; min-height: 400px;"> <svg> <g transform="translate(34.34,47.5) scale(0.345)" height="100%" width="100%"> <svg x="20" y ="50" style ...
Currently, I have an HTML file with two ng-includes. If one of the ng-include src is not found on the server, it loads a blank html and displays a http-404 file not found error in the browser console. In this scenario, I would like to display a Default Er ...
In my HTML table, I have long text in a cell that I don't want to display fully. To truncate the text, I am using the 'text-truncate' CSS attribute. Additionally, I am considering using Bootstrap tooltip to show the full text when needed. He ...
I've been searching for an answer to this question, but so far I haven't found one. In my database, I input two pieces of data and receive a success or failure outcome. What I want is to have a "Submit" button that triggers my PHP query (which ...
Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled. When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a fa ...
I need help with a HTML form that includes: 1 multi-select dropdown: Users select the name of an employee. 1 Textbox: Users input the total price. After entering the total price in the textbox, a small calculation sh ...
When I attempt to validate form fields using Javascript functions, they seem to not load or check the field upon clicking the submit button. <html> <body> <?php require_once('logic.php'); ?> <h1>New Region/Entit ...
Is there a way to set the onClick property for buttons created within a loop? I've tried using JQuery with no success. for(started somewhere... var button = document.createElement('button') var div = document.createEl ...
I've hit a roadblock with my current project. I'm attempting to create an SVG for Formula 1 tracks that will highlight different sectors of the track when the mouse hovers over them. The sectors are neatly separated in the SVG as Sector_1, Sector ...
I'm working on creating a tool that can find the tallest element among a group of elements and then adjust the height of all elements to match the tallest one. Within this tool, I'm attempting to pass a selector to a JQuery method that is locate ...
When utilizing a my-select.component within a form component, the following code snippet is used: <div *ngIf="items?.length"> <select [ngModel]="selectedItem" (ngModelChange)="valueChanged($event)"> <optio ...
Currently, I'm working on a project using Nextjs/Express with TypeScript. I encountered an issue when I introduced the MDEditor component to my pages/sheets/text-editor.tsx file: import MDEditor from "@uiw/react-md-editor"; const TextEditor ...
My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...
My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...
I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...
While browsing through this stunning website, I came across a feature that caught my eye. Can someone please explain how the designer displayed the "The magic is loading" effect: The image vanishes once the site has finished loading completely. ...
Despite my attempts, it seems that the desired functionality is not working as demonstrated here. Here is the CSS code I used: div { background-color: yellow; padding: 20px; display: block; } div:hover { display: none; } Is it necessary ...
Having trouble with text overflow in a kanban board? I've tried various CSS styling options like overflow-wrap: break-word;, word-wrap: break-word;, and hyphens: auto;, but nothing seems to work. Here's a preview. I'm using Vue.js, but I do ...