List marking css. How to remove markers from ul li elements in css

The list-style-type property sets the type of marker. Here is a table of valid values ​​for this property:

In the table I have listed two very unusual properties: georgian and cjk-ideographic. These properties are used regionally. There are several other similar interesting meanings of this property, for example armenian or hiragana, but there is no point in listing them all.

Now an example of using this property:

1. First point.
2. Second point.
3. Third point.

Please note that we have turned the numbered list

in labeled.

Figure 1. List-style-type property.

Be sure to pay attention to the none value, this value removes markers altogether. This property is often used to format lists using CSS.

The list-style-type property is quite simple, like other properties for working with lists.

The list-style-image property sets the marker symbol to a graphic file.

• First point.
• Second point.
• Third point.

Here's what we see:

Figure 3. Format the block
.

It is important to pay attention to the fact that the list markers extend beyond the border of the element block

• , framed by a red border. This can lead to unexpected results, for example we reset the padding
  .
  • First point.
  • Second point.
  • Third point.

  This is what we get:

  Figure 4. Format the block
  .

  The list markers are now outside the container

  . Thus, markers can go beyond the container of the article to which the list belongs, which will violate appearance site.

  It would be better to place them inside a container

  • . That would solve it this problem. That's what the list-style-position property is for.

    The list-style-position property sets the position of the marker relative to the block

  • . This property has two meanings:

    The default value is outside .

    Let's apply this property to our example and place markers in the block

  • by setting this property to inside .
    • First point.
    • Second point.
    • Third point.

    Here's what we got:

    Figure 5. List-style-position property.

    List bullets are now nested within a block

  • .

    list-style property

    The list-style property is a shorthand form that allows you to use the values ​​of all three previous properties.

    Example: make a picture with a marker and place the marker inside the list item block.

    • First point.
    • Second point.
    • Third point.

    Here's the result:

    Figure 6. List-style property.

    We specified two values ​​in one list-style property: the position of the marker and the path of the marker’s graphic file.

    The list-style property is used most often, even to set a single value. It's short and easy to write.

    Related CSS Recipes

    • How to make a dropdown menu in CSS, a complex example with shadows.

    Task

    Change the appearance of markers in the list and replace them with another symbol.

    Solution

    WITH using HTML or CSS it is allowed to set one of three types of markers: disc (dot), circle (circle), square (square). You need to add these values ​​to the style list-style-type property, which is specified for the UL or LI selector (example 1).

    Example 1: Standard markers

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    • Cheburashka
    • Crocodile Gena
    • Shapoklyak

    In this example, a square is used as markers (Fig. 1).

    Rice. 1. Type of markers

    Selecting and setting your own marker symbol occurs in a very unique way, through the :before pseudo-element. The first step is to remove bullets from the list altogether by setting the list-style-type property to none, and then add the :before pseudo-element to the LI selector. The symbol output itself is carried out using the content property, the value of which is the desired text or symbol (example 2).

    Example 2: Using:before and content

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    • Cheburashka
    • Crocodile Gena
    • Shapoklyak

    In this example, the default marker is hidden and a symbol is added in its place (Figure 2).

    

    Rice. 2. Markers in the form of a symbol

    To set some tricky symbol as a marker, you can use Microsoft program Word or character table, this standard program included with Windows. The code encoding must be UTF-8.

    The article presents several methods that allow you to set a specific marker for an unnumbered list, and also indicates their advantages and disadvantages

    If you analyze any site, you can discover the fact that the content very often contains lists of various kinds: menus, lists of products, etc. In the HTML code, the tag is responsible for a numbered list, and the tag for a bulleted list.

    It is also worth noting the fact that in practice, bulleted lists are much more common, but they do have one small drawback. The marker in the list appears differently depending on the browser you are using. For a serious designer, this is a problem.

    To eliminate this negative effect, you need to cancel the marker output using the list-style property:

    ol, ul ( list-style: none; )

    This begins the formation of a list with unique markers and icons. Below are the most common ways to present list item icons that are unique and consistent across all browsers.

    Markers through pictures

    The most common and simple way to specify a marker for a list is to use a background image (the background property). The method is based on specifying in the style table the background image for the list items, as well as the padding property, which reserves space for the new marker. Below is a code example:

    ul ( list- style: none; ) li( background: url(path-to- image) no- repeat; padding- left: 20px; )

    This method pleases with its uniqueness, as it allows you to set absolutely any marker in the form of a picture. Below is how our code will look in the browser:

    

    The main positive side of this method is that it is 100% cross-browser compatible, but despite this, there is a small drawback. Using a picture is an additional call to the server.

    Markers using before

    There is an option when you can do without a picture, if design conditions allow it. This is very often allowed when designing the main content, when the list is marked with the simplest elements, such as a square ( ) or an arrow ( →). Thus, we have come to the point that any suitable special character can act as a marker.

    Next, the question arises of how to insert special characters into list elements. Naturally, not by hand, otherwise it would be a very drawn-out and tedious process, plus it would also be labor-intensive. A pseudo-element will help us get out of this situation before, the use of which is tied to a specific selector, which allows us to automate our process of assigning markers from special characters. This solution is suitable for most browsers, taking into account the fact that for IE, it will be written expression.

    Below is an example of code that produces a bulleted list with an en dash:

    li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( content: " \201 3" ; }

    In practice we get the following picture:

    

    Let me remind you that in real conditions hacks are connected with conditional comments.

    When using this method, the main thing is to know the encoding of the required icon. It is also worth noting that for expression, special characters are written as a numeric combination or mnemonic code. As for the content property, in this case a slash is placed first, and then the hexadecimal code is written.

    Using insertAdjacentHTML

    The above method does not always work correctly in the legendary IE (despite the hack). More precisely, the “crutches” for this browser are not fully developed. A more effective method is based on insertAdjacentHTML, below is the code for this method:

    li( //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

    Markers drawn by CSS properties

    Some square markers can be drawn using some CSS properties. For example, a square with a colored fill is drawn using the background-color property, and a square in the form of a frame is drawn using the border property (by the way, a square with a fill can be drawn in this way). Example entry in a CSS file:

    li( //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "

    " + this. innerHTML) /* hack for e6 and 7 */) li: before, . listMarkerBackColor( background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; ) html . listMarkerBackColor( margin- right: 1px; /* fix a small bug in IE6 */ }

    Thus, a marker drawn with CSS properties will look like this in practice:

    

    Using before and first-child in combination

    This method is often used when designing bread crumbs Online. For those who don’t know what we’re talking about, look at the example below.

    

    In this case, each link is separated from each other by a special character, but there should not be any special character before the first element. A pseudo-class will help us with this first-child, which accesses only the first element of the list. In code it should look like this

    HTML
    

    < ul> < li>< a href= "#" >home < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>Valid code when using target= "_blank"

    li: before( content: " \21 92" ; ) li: first- child: before( content: "" ; )

    It’s also worth noting that this technique is used not only for breadcrumbs, but also for regular bulleted lists, depending on the design brief.

    What browsers does it work in?

    6.0+	4.0+	9.5+	3.0+	3.0+	-	-

    conclusions

    To summarize, we can note the fact that the use of the before pseudo-element is justified and rational in the main content, since there are no special requirements for the design of lists. This, in turn, will reduce the load on the server, compared to the option when using a picture. And if you also note the fact that the main content can contain a lot of bulleted lists, then the difference can become more significant. But pictures benefit greatly in terms of marker design solutions.

    For lists about the creation of which using HTML described here, the following CSS rules are provided.

    list-style-type

    Specifies a bullet or list numbering instead of the type attribute in the HTML code. Property values ​​for bulleted lists can be:

    • disk- circle, set by default.
    • circle- circle.
    • square- square.

    For numbered lists, the property is usually assigned the following values:

    • decimal- Arabic numerals, default value.
    • lower-roman- small Roman numerals.
    • upper-novel- capital Roman numerals.
    • lower-alpha- lowercase Latin letters.
    • upper-alpha- capital Latin letters.

    Also, for any list type, the list-style-type property can be set to none, which will remove the marker altogether.

    Other values ​​are available for numbered lists, such as cjk-ideographic sets ideographic numbering, Armenian- traditional Armenian, and decimal-leading-zero will set the numbering in Roman numerals, but with a leading zero: 01, 02, 03... 09, however in practice these and similar values ​​are used extremely rarely.

    The example below displays three lists: a numbered list with traditional Armenian numbering, a bulleted list with a circle, and a numbered list with items numbered ideographically.

    1. First point
    2. Second point
    3. Third point
    • First point
    • Second point
    • Third point
    1. First point
    2. Second point
    3. Third point

    Result.

    The color of the markers matches the color of the text in the list specified by the property color.

    list-style-image

    Allows you to set your own image as a list marker. For example, if the folder containing the list page contains the file marker.png, which you want to use, then the design code will be as follows:

    Ul ( list-style-image: url("marker.png"); )

    list-style-position

    Determines the position of the marker: either it is placed outside the border of the list element ( list-style-position: outside), or the text wraps around it ( list-style-position: inside).

    The example below shows the difference between these values. In the first case, the marker is inside the list; in the second case, it is placed outside the list.

    • Just look at the difference between inside and outside.
    • In the case of inside, the marker fits directly into the list, without going beyond its boundaries and without interfering with the layout. The text flows around it, the marker seems to be inside.
    • The outside value moves the marker outside the list.

    As a result, the following page is created:

    

    list-style

    Allows you to shorten the code by writing all three listed properties in one line. The rules are written separated by spaces:

    Ul ( list-style: square inside; )

    Let's look at an example of a page with three lists. The first is numbered with numbers in the format 01, 02, the second is marked with a custom picture (file marker.png in the folder with the page), the marker of the third list is disabled.

    The HTML code is given below.

    1. First point
    2. Second point
    3. Third point
    • First point
    • Second point
    • Third point
    1. First point
    2. Second point
    3. Third point

    The browser will display the following page.

    WITH using CSS You can create bulleted and numbered lists, or use a suitable image as a marker.

    In table 1 lists the properties of elements intended for creating and changing lists.

    Table 1. CSS Properties to control the list view

    Property	Meaning	Description	Example
    list-style-type	disc circle square decimal lower-roman upper-novel lower-alpha upper-alpha none	Type of marker. The first three are used to create a bulleted list, and the remaining three are used to create a numbered list.	LI (list-style-type: circle) LI (list-style-type: upper-alpha)
    list-style-image	none URL	Sets any picture as a marker symbol.	LI (list-style-image: url(check.gif))
    list-style-position	outside inside	Selecting the position of the marker relative to the block of text lines.	LI (list-style-position: inside)
    list-style		A universal property that simultaneously includes all of the above properties.

    Since the tag

  • inherits the style properties of the tag
    or
    which acts as its parent, you can style both the UL selector and the LI selector. So, in example 1, the UL selector is used, and style parameters are set for it.

    Example 1: Create a bulleted list

    Result this example shown in Fig. 1. Square markers are used and their external placement relative to the text.

    Rice. 1. List view modified using styles

    To set your own image as a marker, use the list-style-image property, as shown in Example 2.

    Example 2: Using Images as Markers

    • The title should be shorter than three lines.
    • When naming sections, use already established terms, such as guest book, chat, link, home page and others.
    • Before using a technical term or word, decide whether it will be understood by the reader.

    The result of this example is shown in Fig. 2. A small picture is used as markers.

    

    Rice. 2. Images as markers

    Some examples of creating various lists are given in table. 2.

    Table 2. Possible types of lists

    HTML Code	Example
    	All links are working support different browsers text readability
    	Things to consider when testing a site: All links are working support for different browsers text readability
    	Things to consider when testing a site: All links are working support for different browsers text readability
    	Numbered list with Arabic numerals: first second third
    	Numbered list with lowercase Roman numerals: first second third
    	Numbered list with capital Roman numerals: first second third
    	Numbered list with lowercase Latin letters: first second third
    	Numbered list with capital letters of the Latin alphabet: first second third

    Did you like the article? Share with your friends:
    Facebook
    Twitter
    My world
    In contact with
    Google+
    15.05.2020
    Internet
    The most interesting:
    
    Label each polygon and measure the lengths of the sides of each
    
    Connecting YouTube to TV
    
    Names of large numbers Solving a compound problem