CODEWITHSUNDEEP
css
Patrik Krehák
Patrik Krehák

Reputation: 2683

Define custom list-style-type in CSS

I want to ask, if is that possible (something like font-face). Example:

@list-style-type {
  list-style-image: 'myCustomStyle';
  src: url('url-to-image');
}

ul {
  list-style-type: myCustomStyle;
}

Is there something like that? I know I can do that with classes on element and then set custom image, but that is not my point. I have issue from my company and something like this would be very nice.

Upvotes: 1

Views: 1787

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

In CSS as currently defined and implemented, you cannot. The values of the list-style-type property are a set of keywords, somewhat different in different specifications and implementations, but even the syntax does not allow for any custom values to be added.

There is work in progress to define CSS Lists and Counters Module Level 3, which would extend the syntax and semantics, to allow custom values to be defined in @counter-style rules, using constructs designed as part of CSS Counter Styles Level 3. This is planned to include the possibility of defining a named value that uses a custom image, or a construct that contains a custom image as part of it. So far, it seems that there are no implementations of this in released versions of browsers.

Upvotes: 1

Som
Som

Reputation: 76

you can use li background image,

<li style="background:url()">list text here </li>

Or you can use like 

ul {
list-style-image: url('imageName.png');

}

Upvotes: 0

Related Questions