Quicker coding by combining CSS classes without using a preprocessor

Question

When building forms,I need to indicate which are required. I follow this recipe:

<span class='glyphicon glyphicon-asterisk' style'color:red;font-size:9px;'></span>Label

My goal is to create 1 CSS class that uses the Bootstrap glyphicon class as well as bootstrap's glyphicon-asterisk But also allowing me to combine my own style rules.I have read that people use LESS mixins to do this. However I am asking if it is possible to go another route

The code looking something like this:

.req{
        position:relative;
        top:1px;
        display:inline-block;
        font-family: 'Glyphicons Halflings';
        font-style:normal;
        font-weight:normal;
        font-size: 9px;
        font-color:red;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content:"\2a";


    }

However for some reason this does not work.

This is the two bootstrap classes I wish to combine.

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\2a";
}

How can I achieve this without using LESS or SASS or any preprocessor So that when using the code:

<span class='req'></span>Label

I will receive the same output as the original one.

Note I do not want to overwrite the existing bootstrap classes. I want to create a new class in my own style.css that makes use of the two bootstrap classes.

In the solution you've marked, he hasn't combined the two rules in one... You still have two rules, but renamed. — Vi100
– Vi100, Commented Nov 15, 2016 at 12:27

Albertus Brand Venter · Accepted Answer · 2016-11-15 13:12:04Z

1

There is no font-color CSS property, you have to use color. And if you want to use just one class you can use this code.

.req {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size:9px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.req:before {
  content: "\2a";
  color: red;
}

edited Nov 15, 2016 at 13:12

Albertus Brand Venter

3771 gold badge5 silver badges17 bronze badges

answered Nov 15, 2016 at 12:20

max

8,6973 gold badges25 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Albertus Brand Venter Over a year ago

Was in the process of submitting this answer myself.This seems to work

TomasB · Accepted Answer · 2016-11-15 12:05:11Z

0

The problem is that you use the 'content: "\2a"' inside the .req however you can assign content only to :before or :after.

answered Nov 15, 2016 at 12:05

TomasB

7646 silver badges21 bronze badges

Collectives™ on Stack Overflow

Quicker coding by combining CSS classes without using a preprocessor

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related