<html>

<head>
  <meta charset="UTF-8" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>

<body>
  <h1 class="myTitle"><a href="https://blog.sandbay.it/" target="_blank">Go to Blog SandBay</a></h1>
  
  <div>
    <p id="obscured-data" class="text-center">3331111111</p>
  </div>
</body>

</html>
h1.myTitle {
  background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
    no-repeat;
  background-position: 2px 2px;
  margin: 0 0 10px;
  padding: 0 0 0 60px;
  background-size: 45px;
  line-height: 46px !important;
}
h1.myTitle a {
  color: white;
  font-family: Verdana;
  font-size: 20px;
  text-decoration: none;
}
View Compiled
function obscureData(visibleData, show = 3) {
  return (visibleData && visibleData.length > show) ?
    `*${new Array(visibleData.length - show).join('*')}${visibleData.substr(-show)}`
    : '********';
}

document.getElementById('obscured-data')
  .innerHTML = obscureData('3331111111');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.