Home>
Pseudo element
dt
dl
It will be displayed.
I want to display an image (pseudo-element) before li. What is wrong?
// HTML
<ul>
<li>
<dl>
<dt>Location</dt>
<dd>Sapporo City, 001-0001, Japan</dd>
</dl>
</li>
·
·
</ul>
// CSS
li {
list-style: none;
}
.location :: before {
display: block;
content: "";
width: 20px;
height: 20px;
background-image: url ();
background-repeat: no-repeat;
background-size: contain;
}
Add the desired image.
Currently, an image is displayed above the location.
-
Answer # 1
-
Answer # 2
Because location is a class name, not a tag name,
location :: before {
Not. location :: before {
Write a dot before. -
Answer # 3
I want to display an image (pseudo-element) before li ≠ I want a layout like an image
You want to display an image (pseudo-element) on the left side of "Location".
I think there are various ways, but I will introduce the method using FlexBox.
li.location { list-style: none; display: flex; align-items: center; } .location :: before { display: block; content: ""; width: 40px; height: 40px; background-repeat: no-repeat; background-size: contain; padding-right: 20px; } dd { margin-inline-start: 0; }
SamplePlease adjust the image size and padding-right accordingly.
Related articles
- html - image cannot be displayed with relative path
- html - data cannot be acquired or displayed with parameters
- html - background cannot be displayed background-image
- html - the elements are displayed side by side
- html file cannot be displayed in chrome
- [html, css] elements stick out and cannot be modified
- html - elements cannot be lined up side by side with css
- html - in jquery, values cannot be assigned to elements such as nested classes and ids
- the html in iis is not displayed and is downloaded
- html - toolbar is displayed by lottie animation
- html h3 element characters cannot be left justified
- html - view elements received by findall
- html - i want to change what is displayed by selecting a check box
- html - the favicon is not displayed
- html - the color of the part that does not appear when the page is loaded is not displayed
- html - i want to bring it to a hierarchy above the pseudo element, but it does not work with z-index
- html - i want to fix the display of child elements of flexbox
- html - i want to narrow the space between elements of bentobox
- html - css: overflow causes child elements to overflow
- html - fontawesome is not displayed
Related questions
- html : Bootstrap 4 Carousel Indicators
- html : How to make up a block with progress?
- javascript : Came up image on Google Chrome, cross-browser compatibility
- php : How to display product category thumbnail in wordpress woocommerce?
- javascript : Active menu item with submenu expansion
- html : Gradient frame
- html : What to do? Button styles change on Safari IOS
- html : How do I implement this for a button?
- html : How do I set the background to be larger than the width of the parent block?
- JavaScript Create a form using forms, compose a search program using a data structure -an array (simple and binary search)
The closing of and missing "." in the class specification are a mistake or something when writing the code.
:: before
and:: after
are inserted at the start point or end point inside the specified element.If a pseudo element is specified for
li
If it is, it is normal.
If the hope of "before li" says in the sense of outside
,
If this HTML code is implemented, there is no choice but to specify
:: before
forul
.However, it is not preferable to insert an element other than
li
directly underul
, so if this is pushed through, will the questioner allow it? I think that it will be a question of whether to review the code in other element configurations.▼ Additional
There are a lot of ways to realize it besides pseudo-elements,
If you just want the questioner to lay side by side using the code in the example,
・
li
withposition: relative;
.location :: before
toposition: absolute;
・ Add
.location dl
tomargin-left: 50px;
With an additional note,
You will need to make fine adjustments.
* Finely adjust the absolute top left value and the margin-left px value according to the actual construction screen.