How to Resize Unicode Characters via CSS


Tags: css,html5,css3,unicode

Problem :

I have the following ul, which produces a square bullet that (without modification) is very slightly larger than the default square bullets in HTML.

li:before {
  content: "\25a0";
  margin-right: 6px;
  color: blue;          
}

Problems:

  1. I want to significantly increase the size of the square unicode-generated bullet.
  2. Also, the bullet is aligned to the bottom of the text instead of center aligned to the text.

Any clues on how to fix this?

Thanks in advance



Solution :

You need to add the below CSS properties to li:before

font-size: 128px;
vertical-align: middle;

You can change the 128px to any size you want.

Demo


    CSS Howto..

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to save the state of css background-color property change when navigating away from one menu to another

    How can I make my CSS update consistently? [closed]

    How do I use Controller specific stylesheets in Rails 3.2.1?

    How to clip canvas with CSS clip-path?

    Content attribute in CSS to show image icon

    How to Implement different backgrounds on scroll [closed]

    How can I use CSS to make a div float over my text whilst remaining in the right spot?

    How to center this by using css?

    CSS: How to force floating blocks to have equal (100%?) height

    How to stop text from vertically centering in a table?

    How to implement single-line ellipsis with CSS

    How to hover a Fixed element until it reaches some point

    how to move image vertically with css [closed]

    How to set continuous box-shadow through all inline-block centered li elements

    How do I light up an entire single row by hovering on a span in one of the columns?

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to get a property from other class in CSS?

    How to select only one child element in CSS?

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to change the border of an element when selected?

    How to change the style of the arrow in a select box using css

    How can I use themeroller'ed styles in “regular” parts of a page?

    How to float div up?

    How to specify font-size for all bold text in the div?

    How to setup counters for target-counters

    In CSS, how to not float a 300px wide Div to the next line?

    How to hide classes on some pages in WordPress?

    How can I override the CSS ul menu for the JavaScript autocomplete?