Span text color black and white - html

Question

I'm working with partial sections. Here I want to use the only one span to the text in the middle of the two sections. The text center of the two sections will have both colors white and block. According to my code, I have taken in two different section and I use text gradient color. But I don't want is there any possibilities using jquery. Can anyone help me?
.wrapper img {
width: 100%;
position: relative;
}
.section {
position: absolute;
top: 20%;
right: 0;
left: 0;
margin: 0 auto;
width: 1200px;
box-shadow: 9px 7px 30px 0px rgba(0,0,0,0.75);
}
.ad-image {
width: 100%;
height: 700px;
background-image: url('https://preview.ibb.co/e8NhxK/ad.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.ad-image-content h2 {
position: absolute;
top: 198px;
right: 32px;
font-size: 42px;
font-weight: 500;
color: #fff;
}
.ad-portfolio {
background-color: #ffffff;
}
.ad-portfolio .menu ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
color: #808080;
}
.ad-portfolio .menu ul li {
margin: 5px 10px;
font-family: 'Ubuntu', sans-serif;
font-size: 18px;
font-weight: 500;
}
.ad-content {
width: 139%;
position: absolute;
left: 6%;
top: 28%;
color: #000;
}
.ad-content h3 {
font-size: 14px;
letter-spacing: 5px;
}
.ad-content span,
.ad-content h2 {
font-size: 42px;
font-weight: 500;
text-indent: 2px;
}
.ad-content span {
position: absolute;
left: -45px;
top: -4px;
font-size: 42px;
background: linear-gradient(to right, #ffffff 46%, #000000 47%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ad-count {
position: absolute;
top: 50%;
right: 4%;
}
span.read {
display: block;
position: absolute;
top: 90%;
left: 35%;
font-size: 24px;
font-weight: 500;
color: #6f6f6f;
}
span.read:after {
content: '';
position: absolute;
left: -240%;
top: 55%;
width: 0;
height: 3px;
transition: .5s all linear;
}
span.read:hover::after {
left: -240%;
width: 280px;
height: 1px;
background-color: #1F1F1F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fuild">
<div class="container section">
<div class="row">
<div class="col-md-7 ad-image">
<div class="ad-image-block">
</div>
<div class="ad-image-content">
<h2>White</h2>
</div>
</div>
<div class="col-md-5 ad-portfolio">
<div class="menu">
<ul>
<li>Home</li>
<li>Stories</li>
<li>Publications</li>
<li>Contact Us</li>
</ul>
</div>
<div class="ad-content">
<span>&</span>
<h2>Black</h2>
</div>
<div class="ad-count">
<span>01</span>
<hr>
<span>07</span>
</div>
<span class="read">Read more</span>
</div>
</div>
</div>
</div>

Answer 1

You can easily style a single span of text with two colours by using a single CSS Pseudo Element with a higher z-index, and some text-indent.
.bw {
position: relative;
font-size: 30px;
background: #ccc;
font-family: 'Ubuntu', sans-serif;
color: #fff;
}
.bw:after {
content: "& Black";
display: inline;
position: absolute;
top: 0;
right: 0;
color: black;
z-index: 1;
overflow: hidden;
text-indent: -0.3em;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<span class="bw">White & Black</span>