Override css from Pseudo class - html

Question

I am not a designer, so thisquestion might sound dumb.
I can override color property from pseudo class but not padding.
Here is an example
html:
<p id="pid" class="pclass"></p>
css:
.pclass
{
color:red;
padding-left: 20px;
}
#pid:before
{
content:'test ';
color:green !important;
padding-left: 0px !important;
}
Fiddle

Answer 1

Reason
The styles you've applied from the pseudo-class are applied to the content only. Not to the actual element. You might think that !important is making the color to change, but that is not the case.
So, when you change the color from pseudo-class the color of the content i.e. test is changed. And the padding-left is applied to the test only not the <p> element.
Demo
Inspect the paragraph and notice the padding.
.pclass {
color: red;
padding-left: 20px;
}
.pclass:before {
content: 'test';
color: green;
padding-left: 10px;
}
<p id="pid" class="pclass"></p>
Solution
To solve this issue you can set the position of the element to relative and use negative left.
Demo
.pclass {
color: red;
padding-left: 20px;
}
.pclass:before {
content: 'test';
color: green;
left: -20px;
position: relative;
}
<p id="pid" class="pclass"></p>

Answer 2

use this may help you
#pid::before {
left: -20px;
position: relative;
}

Answer 3

You can simply override the padding using the #pid selector: IDs have an higher precedence than classes:
.pclass {
color:red;
padding-left: 20px;
}
#pid:before {
content: 'test';
color: green;
}
#pid {
padding-left: 0;
}
If you wish to keep the margin after the text added by :before you can add
padding-right: 20px;
to #pid:before.