How to apply effects to a unicode character in CSS? [closed]


Tags: html,css,frontend

Problem :

How can I apply various effects, like increasing its size etc., using CSS to this arrow

https://jsfiddle.net/tnfLc58h/

So far I've been able to change its color.

HTML

<div class="down-arrow">

</div>

CSS

.down-arrow:after {
    content:'\2193';
    color: red;
    }

edit: I want to make it responsive.



Solution :

Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).

.down-arrow:after {
  content:'\2193';
  display: inline-block;    /*  or block  */
  background: lightgray;
  color: red;
  height: 32px;
  width: 40px;
  font-size: 24px;
  text-align: center;
}
<div class="down-arrow">
</div>


    CSS Howto..

    How to get css button to stay active after it has been clicked?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to create a CSS style which override another CSS style

    How to align text next to a “div” in HTML/CSS?

    how to many class share 1 css method in CSS

    How can i display all buttons to right in bootstrap panel heading?

    How to set relative url for a css file in Django

    how to create css concave/convex shapes

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    How to change css styles of a jQuery plugin?

    How to display two forms next to each other

    How do I push inline elements onto the next line

    How to make background of table cell transparent

    How do I create a navigation system like that of Lowes.com [closed]

    CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

    How to get floated divs align to the top?

    how does the path work in css and js

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to remove pseudo-element styles from the first element?

    How to make this character to be placed at the right side of its container?

    How to use CSS to create a particular stylized, multi-lined text box?

    How to make the effects of jQuery's $(element).css() persistent?

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    How to select all elements that are not of a class within an id css

    how can I overcome existing css and change button style to the default windows style button?

    how to apply ellipse effect in which contain space in string?

    How to toggle overlay with no body scroll using the same button / div

    How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

    How to apply CSS(background image) to radiobutton when it clicks?