Django templates not rendering CSS when template variables are used - html

Question

I am trying to build a paywall using HTML and CSS in Django, but somehow the CSS that is supposed to fade portions of the text does not render. Here is what I have:
<style>
.adjust-image {
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
}
.blur-text {
filter: blur(5px);
user-select: none;
pointer-events: none;
}
.fade-out {
user-select: none;
position: relative;
}
.fade-out:after {
content: "";
height: 75%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
#paywall-wrapper {
padding: 35px;
border-radius: 5px;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
}
#paywall-wrapper * {
text-align: center;
}
#paywall-wrapper .btn {
left: 50%;
transform: translateX(-50%);
position: relative;
}
</style>
<div class="display-margins">
<div>
<h5>{{solution.questionToProblem}}</h5>
<h6><b>Solution</b></h6>
{% if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %}
<p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>
<div id="paywall-wrapper">
<h4>Premium Subscription</h4>
<p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
<a class="btn btn-primary text-light" href = "{% url 'subscribe' %}">Subscribe</a>
</div>
{% else %}
<p class="noselect format-paragraph">{{solution.solutionToProblem|safe}}</p>
{% for s in solution_images %}
<img class = "adjust-image noselect" src="{{ s.photo.url }}">
<br></br>
{% endfor %}
{% endif %}
{% render_comments solution request %}
<br class= "extra_spacing"></br>
</div>
</div>
Ideally, the text for paywall is supposed to fade out like this:
But it doesn't render when I have template variables in my <p> tags:
Surprisingly enough, if I type out content in my <p> tags manually, it works. But when I use <p>{{random content}}</p>, it doesn't work.
What am I doing wrong with my CSS or my HTML when I say <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>?

Answer 1

Make sure when you want CSS integrated in Django, and you have HTML in your template variable, use:
{{put_your_template_variable|striptags}}
instead of safe.