We Keep Coding

Can anyone tell me why my buttons are not displaying content?

I'm making a custom video player with HTML/JS, however I've run into quite a weird issue. I have two buttons that are just not displaying their content, specifically the Fast Forward and Rewind button. I've tried everything, but cannot get them to display content within the CSS. Any idea why they're not displaying?
#ff {
content: url("https://img.icons8.com/ultraviolet/80/000000/fast-forward.png");
}
#rw {
content: url("https://img.icons8.com/ultraviolet/80/000000/rewind.png");
https://jsfiddle.net/9sqdvg2n/#
Thanks!

The CSS content property only applies to the ::before and ::after pseudo-elements. An example provided by the MDN docs:
q {
color: blue;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
h1::before {
content: "Chapter "; /* The trailing space creates separation
between the added content and the
rest of the content */
}
<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
<q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
lucky enough to invent the Web at the time when the Internet
already existed - and had for a decade and a half.</q>
We must understand that there is nothing fundamentally wrong
with building on the contributions of others.
</p>
<h1>6</h1>
<p>According to the Mozilla Manifesto,
<q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
must have the ability to shape the Internet and
their own experiences on the Internet.</q>
Therefore, we can infer that contributing to the open web
can protect our own individual experiences on it.
</p>
The ::before pseudo-element places the content before the specified element (p::before) .
The ::after pseudo-element places the content after the specified element.

Note: the content property should work according to all documentation, however it seems the <button> element resists this CSS3 content property!
If you were to use a <span> or a <div> or almost any other element (not <input> either as far as I can tell), then your original CSS would do exactly what you wanted it to do in modern browsers
css content property is used only for pseudo-elements ::after and ::before (and others like ::marker?) - as above content should also work as you've used it)
#ff::after {
content: url("https://img.icons8.com/ultraviolet/80/000000/fast-forward.png");
}
#rw::after {
content: url("https://img.icons8.com/ultraviolet/80/000000/rewind.png");
Should fix this

Change html Text with conditional css but without js

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.
My question is:
I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.
Can this be done with CSS only, without any javascript?
Since some users block javascript, that's why I was looking for a way around...
Thanks a lot.

actually #Vaidya & #Preet it is possible via css only :
https://css-tricks.com/swapping-out-text-five-different-ways/
#fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.
I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.
I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.

It can't be done through CSS You must need to add a script for an on-click event.

I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)
If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>
Reference See css only part.
Hope it will help you.

Set "More" "Less" font size

I'm aware there are other questions relating to "show more" and "show less", but this is specifically looking at font size. I'm hoping this will be obvious to a javascript whizz (which I'm not!). I'm trying to set the font size of the "More" and "Less" part of the code (see fiddle). I assumed I'd do this in the CSS by adding a font-size like below, but this has no impact. Does anybody know what needs to be added/modified? Please note I'm not looking for the code to be Jquery, but pure JS like the Fiddle.
.hidden {
display: none;
font-size: 5px;
}
See JSFiddle

You need to fix your fiddle a lot, but to get the font size of your more/less links to be smaller create a class called small and assign it to the A TAG.
https://jsfiddle.net/z10rL3xw/2/
.hidden {
display: none;
}
.small {
font-size: 5px;
}
and put that class in the A link, in the span it is not doing anything for you the way you have things laid out.
You also have some issues in "shrinkables" code: your class for hidden is in a span for more and in the A tag for less. There are a lot better ways to execute that part of your code. Hope this font fix helps, but overall you should check the more/less examples from this stack post: show more/Less text with just HTML and JavaScript

Prevent text selection from exiting a div

I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.

You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}

Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.

I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>

Need to add stable HTML & CSS into jquery "ContentFlow"

I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help

.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.

You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.