Как сделать галочку более строгой?

Question

[olya_097]

такую

с такой разметкой
https://jsfiddle.net/ckgehfax/

Comments

[smilingcheater]

По ссылке из примера на моей системе ваша галочка выглядит вот так: https://pasteboard.co/ILuH0mHP.png
Имхо, если вы хотите её сделать "более строгой", то для надёжного платформо-независимого решения надо использовать SVG.

Answer 1

[Андрей]

Заменить на

label:after {
    content: '';
    position: absolute;
    font-size: 25px;
    border-color: red;
    border-style: solid;
    border-width: 0 0.35em 0.35em 0;
    height: 1em;
    top: 2px;
    left: 12px;
    transform: rotate(45deg);
    width: 0.7em;  
}

border-radius: 5px; - закруглит углы. но на картинке они похоже на ровные. поэтому не указал

Comments

[olya_097]

Андрей, именно оно
спасибо

а тут нужно em? или особо без разницы?

[Андрей]

особо без разницы
можно к примеру и так border-width: 0 6px 6px 0;

[Андрей]

olya_097, PS: заменив всё на px - просто font-size перестанет влиять

Answer 2

[Владимир Коротенко]

label:after{
			  	content: '\2713';
				/*color: #203260;*/
        color: red;
        font-weight: bold;
				position: absolute;
				top: 11px;
				left: 15px;
				font-size: 2em;
				width: 20px;
				height: 16px;
				opacity: 0;
				border-radius: 5px;
			}

Comments

[olya_097]

Владимир Коротенко, не то
суть не в цвете
а в content: '\2713'

[Владимир Коротенко]

Поищите в таблице уникода

Поиск по странице check

www.fileformat.info/info/unicode/char/c.htm

www.fileformat.info/info/unicode/char/2714/index.htm