1) Delete everything unnecessary and leave it simple , that is, wrap each paragraph in a container and remove all unnecessary spaces.
<p class="parrafo">Doy gracias al Señor de todo corazón, <br />
en compañía de los rectos, en la asamblea. <br />
Grandes son las obras del Señor, <br />
dignas de estudio para los que las aman.
</p>
2) I recommend calling the 2 symbols with the pseudo elements ::before and ::after in each of the paragraphs. So:
.salmo .parrafo::before{
content: '℣.';
}
.salmo .parrafo::after{
content: '℟.';
}
.salmo .parrafo::before,
.salmo .parrafo::after{
color: #ed462f; /*Con esto pintas ambos del color rojo*/
}
3) All paragraphs except the first two, we will assign a relative position and an external spacing with margin to the left. For the color we can use border or in my example a shadow:
.salmo .parrafo{
margin-left: 40px; /*O el espacio que consideres*/
position: relative;
box-shadow: -7px 0 0 #49a99d;
}
4) To the first symbol we will take it out of the regular flow of html with an absolute position and place it on the left at the same negative distance that we assign margin in the paragraph:
.salmo .parrafo::before{
content: '℣.'; /*<-- Esta línea ya la habíamos puesto arriba*/
position: absolute;
left: -40px;
}
And that's it! At the rate we're taking you'll have something like this:
.salmo .parrafo::before{
content: '℣.'; /*<-- Esta línea ya la habíamos puesto arriba*/
position: absolute;
left: -40px;
}
.salmo .parrafo::after{
content: '℟.';
}
.salmo .parrafo::before,
.salmo .parrafo::after{
color: #ed462f; /*Con esto pintas ambos del color rojo*/
}
.salmo .parrafo{
margin-left: 40px; /*O el espacio que consideres*/
position: relative;
box-shadow: -7px 0 0 #49a99d;
}
<div class="page_break salmo">
<p><b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6</p>
<p>El Señor recuerda siempre su alianza</p>
<p class="parrafo">Doy gracias al Señor de todo corazón, <br />
en compañía de los rectos, en la asamblea. <br />
Grandes son las obras del Señor, <br />
dignas de estudio para los que las aman.
</p>
<p class="parrafo">
Esplendor y belleza son su obra, <br />
su justicia dura por siempre. <br />
Ha hecho maravillas memorables, <br />
el Señor es piadoso y clemente.
</p>
<p class="parrafo">
Él da alimento a sus fieles, <br />
recordando siempre su alianza. <br />
Mostró a su pueblo la fuerza de su obrar, <br />
dándoles la heredad de los gentiles.
</p>
</div>
The rest will try to accommodate the styles according to what you want to achieve, for example:
.salmo p{
font-family: sans-serif;
}
.salmo .title,
.salmo .intro
{
color: #ed462f;
}
.salmo .intro{
display: inline-block;
padding-right: 10px;
}
.salmo p:not(.intro):not(.title){
margin: 0;
margin-left: 40px;
padding: 10px 5px;
padding-left: 10px;
position: relative;
box-shadow: -7px 0 0 #49a99d;
line-height: 1.2em;
}
.salmo p:not(.salmo):not(.title)::before,
.salmo p:not(.salmo):not(.title)::after{
color: #ed462f;
}
.salmo p:not(.salmo):not(.title)::before{
content: '℣.';
position: absolute;
left: -40px;
}
.salmo p:not(.salmo):not(.title)::after{
content: '℟.';
}
<div class="page_break salmo">
<p class="title"> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
<p class="intro">
El Señor recuerda siempre su alianza
</p>
<p class="parrafo">Doy gracias al Señor de todo corazón, <br />
en compañía de los rectos, en la asamblea. <br />
Grandes son las obras del Señor, <br />
dignas de estudio para los que las aman.
</p>
<p class="parrafo">
Esplendor y belleza son su obra, <br />
su justicia dura por siempre. <br />
Ha hecho maravillas memorables, <br />
el Señor es piadoso y clemente.
</p>
<p class="parrafo">
Él da alimento a sus fieles, <br />
recordando siempre su alianza. <br />
Mostró a su pueblo la fuerza de su obrar, <br />
dándoles la heredad de los gentiles.
</p>
</div>
In the remote case, that you can not (or do not want to) add classes to each paragraph within each psalm , you can always add a class to only the first two paragraphs and use a selector to the other paragraphs that exclude them. Example:
.salmo p:not(.salmo):not(.title){ /*Este sería el selector*/ }
Or you can even become a hipster and use only the specific CSS selectors without assigning classes to any element within the psalm, something like this:
.salmo p{
font-family: sans-serif;
}
.salmo p:first-child,
.salmo p:nth-child(2)
{
color: #ed462f;
}
.salmo p:first-child b{
display: inline-block;
padding-right: 10px;
}
.salmo p:not(:first-child):not(:nth-child(2)){
margin: 0;
margin-left: 40px;
padding: 10px 5px;
padding-left: 10px;
position: relative;
box-shadow: -7px 0 0 #49a99d;
line-height: 1.2em;
}
.salmo p:not(:first-child):not(:nth-child(2))::before,
.salmo p:not(:first-child):not(:nth-child(2))::after{
color: #ed462f;
}
.salmo p:not(:first-child):not(:nth-child(2))::before{
content: '℣.';
position: absolute;
left: -40px;
}
.salmo p:not(:first-child):not(:nth-child(2))::after{
content: '℟.';
}
<div class="page_break salmo">
<p> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
<p>
El Señor recuerda siempre su alianza
</p>
<p>Doy gracias al Señor de todo corazón, <br />
en compañía de los rectos, en la asamblea. <br />
Grandes son las obras del Señor, <br />
dignas de estudio para los que las aman.
</p>
<p>
Esplendor y belleza son su obra, <br />
su justicia dura por siempre. <br />
Ha hecho maravillas memorables, <br />
el Señor es piadoso y clemente.
</p>
<p>
Él da alimento a sus fieles, <br />
recordando siempre su alianza. <br />
Mostró a su pueblo la fuerza de su obrar, <br />
dándoles la heredad de los gentiles.
</p>
</div>
Or leaving, the follies on the side the simplest, is that you wrap everything in a single container type list <ul> and each paragraph is a <li> , example:
.salmo{
--red: #ed462f;
--green: #49a99d;
}
.salmo p,
.salmo li{
font-family: sans-serif;
}
.salmo p:first-child,
.salmo p:nth-child(2)
{
color: var(--red);
}
.salmo p:first-child b{
display: inline-block;
padding-right: 10px;
}
.salmo ul{
list-style: none;
padding: 0;
}
.salmo li{
margin: 0;
margin-left: 40px;
padding: 10px 5px;
padding-left: 10px;
position: relative;
box-shadow: -7px 0 0 var(--green);
line-height: 1.2em;
}
.salmo li::before,
.salmo li::after{
color: var(--red);
}
.salmo li::before{
content: '℣.';
position: absolute;
left: -40px;
}
.salmo li::after{
content: '℟.';
}
<div class="page_break salmo">
<p> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
<p>
El Señor recuerda siempre su alianza
</p>
<ul>
<li>Doy gracias al Señor de todo corazón, <br />
en compañía de los rectos, en la asamblea. <br />
Grandes son las obras del Señor, <br />
dignas de estudio para los que las aman.
</li>
<li>
Esplendor y belleza son su obra, <br />
su justicia dura por siempre. <br />
Ha hecho maravillas memorables, <br />
el Señor es piadoso y clemente.
</li>
<li>
Él da alimento a sus fieles, <br />
recordando siempre su alianza. <br />
Mostró a su pueblo la fuerza de su obrar, <br />
dándoles la heredad de los gentiles.
</li>
</ul>
</div>
If you have any other questions, do not forget to leave your comment.
