I have spent almost two hours trying to figure this out. Can anyone provide any insight into making the ::before selector work?
Relevant html:
<body><section><article><div>
<h2>What Others Have Said...</h2>
<div class="centered">
<h3 class="reviewExcerpt"><p>The services were awesome</p>
</h3>
<div class="5 floatRight">
<p>— Anonymous</p>
</div>
</div>
</div></article></section></body>
Relevant CSS:
.reviewExcerpt p::after {
content: "\00A0.\00A0.\00A0.";
}
.5 p::before {
content: "5 stars";
font-family: 'Font Awesome';
display:block;
}
.floatRight {
float: right;
display: block;
}
h3 {
font-family: 'Raleway', script, Helvetica, sans-serif;
font-size: 1.6em;
line-height: 1em;
margin: .8em 0 0;
font-weight: 600;
color: #555555;
}
h2 {
font-family: 'Raleway', script, Helvetica, sans-serif;
font-size: 1.9em;
margin: .8em 0 .25em;
font-weight: 600;
color: #b565a7;
}
.centered {
margin: 0 auto;
text-align: center;
}
JS fiddle: https://jsfiddle.net/k6y07r45/
The code shows ::after working just a couple lines up.
CSS Selectors (class [.] or ID [#]) cannot start with a number.
This SO question provides some insight on the required grammar if you want to explore it.
I updated your JS Fiddle, changing your class .5 to .a-5. You should also think about making your classes more semantic, to give you and anyone else reading your code clarity on complex projects. For instance, rating is a lot more meaningful than 5 (not to mention valid).
It's also worth noting right now that ::before and ::after can only select non-replaced elements. This doesn't affect what you're doing right now, but since you're experimenting that's another tidbit to remember.
Related
I am trying to style the Angular2 ng2-date-picker (link) component and would appreciate any guidance.
I cannot find any documents regarding the styling of this component online, and there is only one similar question on stackoverflow, which does not help me much.
I would like to style the actual `<input >` element inline with the below CSS:
.af-input {
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
border-radius: 15px;
border: solid 1px $af-brownish-grey;
background-color: transparent;
color: $af-brownish-grey;
}
This is my setup in my HTML/View:
<div class="date-picker">
<dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>
These are the CSS attributes I see when inspecting the element in the browser:
dp-date-picker.dp-material .dp-picker-input {
box-sizing: border-box;
height: 30px;
width: 213px;
font-size: 13px;
outline: 0;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
This is the HTML code when inspecting the ng-date-picker element:
<div _ngcontent-oyd-c55="" class="date-picker">
<dp-date-picker _ngcontent-oyd-c55="" theme="dp-material" mode="daytime" ng-reflect-theme="dp-material"
ng-reflect-mode="daytime" ng-reflect-config="[object Object]" class="dp-material ng-valid ng-dirty ng-touched"
ng-reflect-model="Fri Jun 19 2020 13:50:18 GMT+0">
<div ng-reflect-ng-class="[object Object]" class="dp-open">
<div class="dp-input-container"><input type="text" class="dp-picker-input ng-pristine ng-valid ng-touched"
ng-reflect-is-disabled="false" ng-reflect-model="2020-06-19" placeholder=""></div>
</div>
</dp-date-picker>
</div>
Thank you in advance!
It doesn't seem like this component allows configurations styling-wise.
You'll need to manually override existing styling with css. Just inspect the element and find the required selectors you want to override.
As this is an external component, make sure to wrap your styles with ::ng-deep { ... }, so that your styles get placed at the top of the DOM tree and can override initial styling.
As per Berk Kurkcuoglu's answer, I solved my styling challenge using ::ng-deep { ... }.
This is my specific implementation to style the <input >:
.date-picker {
::ng-deep {
input {
&:last-child {
font-family: $af-default-font;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
border-radius: 15px;
border: solid 1px $af-brownish-grey;
background-color: transparent;
color: $af-brownish-grey;
}
}
}
}
*See also this answer for more details.
I hope this helps someone else!
I have the following code in which I am seeing an inconsistency in styling between the styling of the placeholder text in the email input box and the styling of the content of the options box, this is especially seen in Firefox where the content of the options box appears bold in comparison to the "Email" placeholder text. I'm wondering if it is possible to get a more consistent look between the two whilst keeping the same font family and font size.
html:
<input type="email" name="email" placeholder="Email">
<br />
<select>
<option selected>Option 1</option>
</select>
css:
input[type=email] {
width: 320px;
height: 20px;
background-color: #E9F2F9;
border: none;
margin-top: 20px;
margin-left: 20px;
padding-top: 8px;
padding-bottom: 12px;
padding-left: 9px;
position:relative;
}
select {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.02px;
width:329px;
height:40px;
padding-left:9px;
padding-top:8px;
padding-bottom:12px;
background: #E9F2F9;
color:#666666;
border:none;
display: inline-block;
cursor:pointer;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
If you want to adjust the placeholder styling you can use the pesudo-class selector ::placeholder in addition to the input selector input[type=email].
If you want to adjust the option styling you can use the option.
This way you can synchronize the styling of the elements:
option, input[type=email]::placeholder {
font-family: Helvetica;
text-transform: Uppercase;
font-size: 1em;
background-color:yellow;
}
Of course you can use whatever properties you wish. This will allow you to override any browser defaults which might affect the look differently.
Here is some more info about pseudo-classes:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
They can be extremely useful so going over some of them to at least get a sense of what's available is highly recommended.
For some more help with cross-browser quirks i also recommend checking out the normalize library:
http://nicolasgallagher.com/about-normalize-css/
EDIT:
select, option, input[type=email]::placeholder {
color: black;
font-family: Helvetica;
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
}
I know you can use the display: property to display an inline-element as a block-element, and also other like table-cell etc. However, is there a way to make an element display like any other element? Something like
div.header{ display: h2; }
would be useful. Any way to accomplish this in css, except for overriding all the h2 properties?
If h2 has the following styles:
h2 {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
and you want div.header to look the same...
You can state this in your css:
h2, div.header {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
I have paragraphs with inline header spans that I'm trying to set to a grid. To make sure that multi-line headers are properly spaced, I'm using line-height; however, this results in too much space between the first and second lines of the paragraph. Also, multi-line headers seem not to be inlined. (Actual desired line-height of headers is 33px, but I made it 44px to accentuate the space between the first and second paragraph lines).
Please see http://jsfiddle.net/NbTvu/4/ and http://i.imgur.com/qkffaWl.png
CSS:
p {
font-size: 14px;
line-height: 22px;
margin-top: 22px;
}
span.h1 {
font-size: 24px;
line-height: 44px;
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
HTML:
<p>
<span class=h1>DISCONTINUING PPIs</span>
— Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>
Thanks in advance!
Your font-size is too big for the thing you want to achieve.
Look at this: if I remove the font-size and line-height, it works perfectly:
http://jsfiddle.net/NbTvu/1/
span.h1 {
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
Try to style from here.
And using span class="h1" is very very bad. Use a regular h1 or give your span a better classname.
Or you can play a little with margins:
p {
font-size: 14px;
line-height: 22px;
margin-top: 20px;
padding:0;
}
span.h1 {
font-size: 24px;
font-weight: 600;
display: inline-block;
margin-top: 21px;
}
and remove line-height... http://jsfiddle.net/NbTvu/2/
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}